Unable to resize highlighted area when fetching data inside a modal.

[PravunathSingh]

Okay, so I've been trying to get a feature working where the data is being fetched when the modal is opened but even though I have a used a combination of highlightedSelectors and mutationObservables the highlighted area is not resizing after the data has been fetched. The feature is working fine for prefetched or static data but the above use case just isn't working.

Here is a codesandbox link where I've been able to reproduce the issue. https://codesandbox.io/s/reactour-tour-demo-using-react-bootstrap-modal-forked-6v62kz?file=/steps.js

NOTE: When I change the size of the viewport after the data fetching has been done, the highlighted area seems to resize but it isn't doing so for the initial data fetching.

Any help would be much appreciated.

[bo-516]

in this case ,the hightlighted area size has't changed due to target component size change has't been observered https://github.com/elrumordelaluz/reactour/blob/d703ca1b2aebf33c4f616d9ac6d1e3c8e653772b/packages/tour/hooks.tsx#L66

you can resolve by this way: create a dom to extend the compent size <div className='absolute inset-0' data-tour='1.1' />

after fetching data you can reset selector to update mask area { setSteps } = useTour()

setSteps(currentStep=>{

    return currentStep.map((itm, idx)=>{

      if(idx!== 0) return itm

      return {

        ...itm,

        selector: '[data-tour="1.1"]',

      }

    })

  })