[Select]: double focus ring with core 6.11+ #713

Problem

With @tedi-design-system/core 6.11+, tedi-select shows two focus rings on keyboard focus: its own ring (border plus a 1px inset box-shadow) and core's global 2px outline 1px outside it.

The trigger styles :focus / :active in select.component.scss, but it never resets outline, so core 6.11's global rule applies on top:

*:where(:focus-visible) {
  outline: var(--tedi-borders-02) solid var(--global-outline-color);
  outline-offset: var(--global-outline-offset);
}

The lockfile pins core 6.9.0, which doesn't have this rule, so rc / main are not affected yet. It will ship with the core 6.11 bump.

Also visible wherever Select is reused: InputGroup, Pagination's page-size selector and Table's page-size selector.

Steps to reproduce

1. Install core 6.11.1 or later.
2. Open Storybook → Select → Default.
3. Click the page background, then press Tab.
4. The trigger shows its inset ring plus a second outline around it.

Solution

Reset the outline on the trigger, since it already draws its own focus ring:

.tedi-select__trigger {
  outline: none;
}

Check the searchable variant (.tedi-select__trigger--searchable, where focus sits on the inner search input) the same way.

TimeField and DatePicker had the same problem and are fixed in #573 by resetting the outline on their inner input.

Examples and information

• Core 6.9.0 index.css: no *:where(:focus-visible) rule. Core 6.11.1: has it.
• Should be fixed before, or together with, the core 6.11 bump.