Capgemini / Capgemini/dcx-react-library

`Autocomplete` — hardcoded inline styles cannot be overridden by external CSS

Open
#707 0 comments 0 reactions 1 assignee Claimed by @Ibabalola View on GitHub
enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.