Capgemini / Capgemini/dcx-react-library
`Autocomplete` — hardcoded inline styles cannot be overridden by external CSS
- Dominant language
- TypeScript
- Stars
- 120
- Forks
- 6
- PR merge metrics
- No merged PRs in 30d
Description
**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**
1. Render ``
2. Inspect any of the affected elements in browser DevTools
3. Attempt to override a style (e.g. `position`, `display`) from an external stylesheet
4. 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:
1. A `useDefaultStyles` boolean prop (default `true`) that gates every hardcoded inline style — when `false`, no inline styles are injected.
2. 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.
3. 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.
Contributor guide
Assessment
This issue has not been assessed yet.