FocusLock issues

[jhanley87]

I used our DatePicker and TimePicker elements and it did not really work due to the icons being black when running in dark mode. therefore I switched to using MUI X DateTimePicker.

<ThemeProvider
        theme={createTheme({
          palette: {
            mode: Flex.Manager.getInstance().configuration.theme?.isLight
              ? "light"
              : "dark",
          },
        })}
      >
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <MuiDateTimePicker
          
            value={props.value}
            onChange={props.onchange}
            renderInput={(params) => (
              <TextField
              
                id="id"
                placeholder="mm/dd/yyyy hh:mm"
                size="small"
                fullWidth
                {...params}
              />
            )}
            disablePast
          />
        </LocalizationProvider>
      </ThemeProvider>

This looks great and fits in with the paste theme:

However I am getting FocusLock fighting which fill up the browser console and slow down the UI

Any ideas for a fix? I tried adding some attributes from here to the element that wraps the datetime picker but to no avail

[ghost]

I used our DatePicker and TimePicker elements and it did not really work due to the icons being black when running in dark mode. therefore I switched to using MUI X DateTimePicker.

I'm not familiar with the MUI X DateTimePicker component myself although I will ask the team about the icon rendering in dark mode! That feels like something our team could help with

[jhanley87]

Thanks for the response. This seems to suggest it’s a browser issue :-(

#1609

[ghost]

@jhanley87 hey just a quick follow up. We actually performed a spike on this trying to avoid the need to use MUI X components in your case. There is some additional thinking and discussing the team needs to do based on the findings of our spike and we'll make sure to update the discussion here when we have a better sense of our path forward. Thanks for the report!

[jhanley87]

Awesome! Thanks for the follow up :-)

[loreina]

Hi @jhanley87, our team has a draft PR up: #2713. Feel free to follow along to track progress.

[SiTaggart]

The icon in Date and Time picker has been updated to honor dark and light themes.

We still don't provide support for components from other libraries though.