shepherd-pro/react-shepherd

Material UI form elements get blocked by shepherd

Baspa opened this issue · 9 comments

Baspa commented

I use the tour with useModalOverlay set to true. However, when I do this form elements like selectlist or datetime pickers get unusable.

image

As you can see I am not able to select an option of the selectlist. Is there an option that checks if the attached div is expanded or something?

RobbieTheWagner commented

You would have to manually handle this case. Ideally, the select would be rendered in place, but sometimes libraries render the dropdown part on the body to make sure it goes overtop of all content.

Do you know if the dropdown is all part of the same DOM parent element or if it is added to the body?

Baspa commented

It is added to the body @rwwagner90

RobbieTheWagner commented

@Baspa then it would not be highlighted, as it is not part of the parent element. Does it have a render in place option?

chuckcarpenter commented

@Baspa are you wanting to open that select and therefore change the size of the highlighted area?

RobbieTheWagner commented

@chuckcarpenter he wants it to expand to include the dropdown content. This is not possible because the dropdown content is added to the body, not rendered in place.

Baspa commented

Exactly @rwwagner90 , @chuckcarpenter because now I can't click on the items in the dropdown.

RobbieTheWagner commented

@Baspa it's not possible. The dropdown is a separate element on the body. We would need to support highlighting multiple elements to support this case.

Baspa commented

I managed to fix this with the other function I wrote to check if an element already exist. Previously I wrote this to check if an element is already 'rendered':

function waitForElementToDisplay(selector) {
    return new Promise(function (resolve) {
        (function checkIfElementExists() {
            if (document.querySelector(selector) !== null) {
                resolve();
            } else {
                setTimeout(checkIfElementExists, 500);
            }
        })();
    })
}

After doing some checks on the elements that Shepherd creates I wrote a function that applies the classes shepherd-enabled, shepherd-target and a z-index of 10000:

/**
 * Function to add classes and styling so that the passed elements
 * are being clickable while following the tour. 
 * @param {string} selector 
 * @param {string} type // class (.) or ID (#) 
 */
function addClickableStyling(selector, type) {

    const combinedSelector = type + selector;
    waitForElementToDisplay(combinedSelector).then(() => {

        let div = document.querySelector(combinedSelector);
        div.classList.add("shepherd-enabled");
        div.classList.add("shepherd-target");
        div.style.zIndex = '10000';
    })
}

The function gets called on the when method:

     when: {
            show: function () {
                addClickableStyling('menu-meeting-type', '#');
            }
        }

I just pass the classname or ID from the element that is rendered after the user clicks on a selectlist for example.

RobbieTheWagner commented

Ah I did not consider since it was on the body we could just move it overtop of the overlay with z-index.

  • 👍2