Describe the bug
The Autocomplete component applies all structural and layout styles as hardcoded inline styles in JSX. Because inline styles carry the highest CSS specificity short of !important, they cannot be overridden by external stylesheets or design tokens. Any team needing to customise the component's appearance is forced to fork the component or pepper their stylesheets with !important declarations.
The affected elements are:
| Element |
Hardcoded styles |
Single-select wrapper div |
position: relative |
Accessibility / visually-hidden div |
position: absolute, overflow: hidden, clip, width: 1px, height: 1px, etc. |
Multi-select presentation div |
display: inline-flex, flex-direction: row, flex-wrap: wrap, width: 100%, position: relative |
| Selected list items |
display: inline-flex |
| "Remove all" button |
margin-left: 5px, font-weight: bold, vertical-align: -webkit-baseline-middle |
Assistive hint span |
display: none |
None of these elements have stable identifiers, making reliable CSS targeting impossible even when specificity is worked around.
To Reproduce
- Render
<Autocomplete options={[...]} />
- Inspect any of the affected elements in browser DevTools
- Attempt to override a style (e.g.
position, display) from an external stylesheet
- Observe that the inline style takes precedence and the override has no effect without
!important
Expected behavior
Consumers should be able to apply equivalent rules from their own stylesheet without resorting to !important. Key structural elements should expose stable, predictable IDs to allow reliable CSS targeting. A reference stylesheet should be provided that mirrors all built-in styles as a ready-made starting point.
Screenshots
N/A — reproducible via DevTools style panel inspection.
Desktop (please complete the following information):
- OS: Any
- Browser: Any (Chrome, Firefox, Safari)
- Version: All current versions of
dcx-react-library
Smartphone (please complete the following information):
- Device: Any
- OS: Any
- Browser: Any
- Version: All current versions of
dcx-react-library
Additional context
Proposed resolution involves three parts:
- A
useDefaultStyles boolean prop (default true) that gates every hardcoded inline style — when false, no inline styles are injected.
- Fixed IDs (
dcx-autocomplete-wrapper, dcx-autocomplete-status-container, dcx-autocomplete-multiselect-wrapper, dcx-autocomplete-remove-all, dcx-autocomplete-assistiveHint) on all affected elements so they are always addressable from CSS.
- A companion
Autocomplete.css file containing all default styles under those ID selectors so consumers can import it as-is or adapt it as needed.
Describe the bug
The
Autocompletecomponent applies all structural and layout styles as hardcoded inline styles in JSX. Because inline styles carry the highest CSS specificity short of!important, they cannot be overridden by external stylesheets or design tokens. Any team needing to customise the component's appearance is forced to fork the component or pepper their stylesheets with!importantdeclarations.The affected elements are:
divposition: relativedivposition: absolute,overflow: hidden,clip,width: 1px,height: 1px, etc.divdisplay: inline-flex,flex-direction: row,flex-wrap: wrap,width: 100%,position: relativedisplay: inline-flexmargin-left: 5px,font-weight: bold,vertical-align: -webkit-baseline-middlespandisplay: noneNone of these elements have stable identifiers, making reliable CSS targeting impossible even when specificity is worked around.
To Reproduce
<Autocomplete options={[...]} />position,display) from an external stylesheet!importantExpected behavior
Consumers should be able to apply equivalent rules from their own stylesheet without resorting to
!important. Key structural elements should expose stable, predictable IDs to allow reliable CSS targeting. A reference stylesheet should be provided that mirrors all built-in styles as a ready-made starting point.Screenshots
N/A — reproducible via DevTools style panel inspection.
Desktop (please complete the following information):
dcx-react-librarySmartphone (please complete the following information):
dcx-react-libraryAdditional context
Proposed resolution involves three parts:
useDefaultStylesboolean prop (defaulttrue) that gates every hardcoded inline style — whenfalse, no inline styles are injected.dcx-autocomplete-wrapper,dcx-autocomplete-status-container,dcx-autocomplete-multiselect-wrapper,dcx-autocomplete-remove-all,dcx-autocomplete-assistiveHint) on all affected elements so they are always addressable from CSS.Autocomplete.cssfile containing all default styles under those ID selectors so consumers can import it as-is or adapt it as needed.