Filepicker not working with fullWidth={true}

[tomitank]

hi,
https://eui.elastic.co/#/forms/form-controls#file-picker

can't open the file chooser window when has fullWidth={true} props.

[mgadewoll]

Thanks for raising this @tomitank!

Based on your previous issue raised I assumed you encountered the issue on the same browser version and OS and sure enough I was able to reproduce it on Firefox 115 on Windows.

Note

The underlying issue: The input element is not stretched across the entire width of the container element. The applied styles of position: absolute and inset: 0 don't behave as expected in Firefox.

The issue is not limited to fullWidth=true.

fullWidth=true

fullWidth=false

ℹ I checked multiple Firefox versions and this issue is reproducible until 125.0.3, it's not reproducible from version 126 onwards. (at the time of writing the latest Firefox version is 131)

[mgadewoll]

ℹ We won't address this bug for older Firefox versions as EUI's and Kibana's browser support is explicit in targeting latest evergreen browser versions.

For users of EUI components with this issue it can be manually fixed by adding custom styles, e.g. like:

// CSS-in-JS via Emotion
<EuiFilePicker
   css={{
    '.euiFilePicker__input': {
      width: '100%',
    },
  }}
/>

// global CSS
.euiFilePicker__input {
  width: 100%;
}