Date picker styling randomly crashes

#1

In either Chrome or Firefox, local development or production:

#2

Hi @Jeremy_Paris,

So far I didn’t meet this kind of behavior before. I’ll have to ask for some more details about your usage so I can have some context around your usage:

  1. When the popup displays incorrectly do you have errors in the console? If yes, can you please share the whole error message?

  2. Which version of Mobiscroll are you using?

  3. Can you please share the component’s initialization code?

#3

Hi @Szili

Thanks for your answer!

  1. I don’t have any console error. You can see in my screenshot popup content at the bottom, but the popup itself is not displayed in the middle of the page

  2. v5.16.1

  3. Here it is :

         <Datepicker
       id="date-filter"
       controls={["calendar"]}
       select="range"
       touchUi={true}
       value={selectedDates}
       onChange={(e) => setSelectedDates(e.value)}
       inputProps={{
         style: {
           padding: "10px",
           borderRadius: "0.375rem",
           border: "1px solid rgb(209, 213, 219)",
           fontSize: "14px",
           color: "rgb(31, 41, 55)",
           backgroundColor: "white",
         }
       }}
       locale={locale.fr}
       setText="Valider"
       rangeStartLabel="Début"
       
     />

Thanks!

#4

Thanks for the code! :+1:

I’ve tested your code in a simple create-react-app, but so far I wasn’t able to reproduce the issue with it.

How are you importing datepicker’s CSS/SCSS into your app? I’m asking because based on the screenshot there is no style applied to the component.

#5

Thanks Sizli, you put me on the right track : the mobiscroll css was imported in a subcomponent so it was loaded only after visiting it.
It seems to work now! :ok_hand: