From e99948ba1558d790ab52b0af353e79926714ee08 Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Wed, 29 Jul 2026 12:54:00 +0300
Subject: [PATCH 1/4] fix(select): wcag fixes #58

---
 .../form/select/components/select-input.tsx   | 35 ++++++++++++++-----
 .../components/select-multi-value-remove.tsx  |  2 +-
 .../select/components/select-multi-value.tsx  |  7 ++++
 .../components/form/select/select.module.scss | 16 +++------
 .../components/form/select/select.spec.tsx    | 33 +++++++++++++++--
 .../components/form/select/select.stories.tsx |  4 +--
 src/tedi/components/form/select/select.tsx    |  5 ++-
 7 files changed, 73 insertions(+), 29 deletions(-)

diff --git a/src/tedi/components/form/select/components/select-input.tsx b/src/tedi/components/form/select/components/select-input.tsx
index bd58ce839..3d83ccbd8 100644
--- a/src/tedi/components/form/select/components/select-input.tsx
+++ b/src/tedi/components/form/select/components/select-input.tsx
@@ -4,12 +4,29 @@ import { components as ReactSelectComponents, InputProps } from 'react-select';
 import { ISelectOption } from '../select';
 import styles from '../select.module.scss';
 
-export const SelectInput = (props: InputProps<ISelectOption, boolean>): JSX.Element => (
-  <ReactSelectComponents.Input
-    {...props}
-    className={cn(props.className, styles['tedi-select__input'])}
-    isHidden={props.selectProps.inputIsHidden !== undefined ? props.selectProps.inputIsHidden : props.isHidden}
-    aria-required={props.selectProps.required}
-    required={props.selectProps.required}
-  />
-);
+export const SelectInput = (props: InputProps<ISelectOption, boolean>): JSX.Element => {
+  // react-select points the combobox's `aria-describedby` at its own placeholder
+  // element, so screen readers announce the placeholder as the field's
+  // description (placeholder should be visual only). Drop that reference, keep any
+  // other react-select description (e.g. its live-region), and append the field's
+  // helper/error text so it's actually announced.
+  const helperDescribedBy = (props.selectProps as { 'aria-describedby'?: string })['aria-describedby'];
+  const describedBy =
+    [
+      ...(props['aria-describedby']?.split(' ') ?? []).filter((token) => token && !token.endsWith('-placeholder')),
+      helperDescribedBy,
+    ]
+      .filter(Boolean)
+      .join(' ') || undefined;
+
+  return (
+    <ReactSelectComponents.Input
+      {...props}
+      className={cn(props.className, styles['tedi-select__input'])}
+      isHidden={props.selectProps.inputIsHidden !== undefined ? props.selectProps.inputIsHidden : props.isHidden}
+      aria-required={props.selectProps.required}
+      required={props.selectProps.required}
+      aria-describedby={describedBy}
+    />
+  );
+};
diff --git a/src/tedi/components/form/select/components/select-multi-value-remove.tsx b/src/tedi/components/form/select/components/select-multi-value-remove.tsx
index 828e3a88b..aef655096 100644
--- a/src/tedi/components/form/select/components/select-multi-value-remove.tsx
+++ b/src/tedi/components/form/select/components/select-multi-value-remove.tsx
@@ -29,7 +29,7 @@ export const SelectMultiValueRemove = ({ innerProps, data }: MultiValueRemovePro
         onKeyDown={handleKeyDown}
         className={styles['tedi-select__multi-value-clear']}
         iconSize={18}
-        title={`${getLabel('clear')} ${data.label}`}
+        title={`${getLabel('remove')} ${typeof data.label === 'string' ? data.label : data.value}`}
       />
       <Separator color="primary" axis="vertical" className={styles['tedi-select__separator']} />
     </>
diff --git a/src/tedi/components/form/select/components/select-multi-value.tsx b/src/tedi/components/form/select/components/select-multi-value.tsx
index b58f96fa5..8c90a0ccf 100644
--- a/src/tedi/components/form/select/components/select-multi-value.tsx
+++ b/src/tedi/components/form/select/components/select-multi-value.tsx
@@ -1,6 +1,7 @@
 import cn from 'classnames';
 import { MultiValueProps } from 'react-select';
 
+import { useLabels } from '../../../../providers/label-provider';
 import { Tag, TagEllipsis } from '../../../tags/tag/tag';
 import { ISelectOption } from '../select';
 import styles from '../select.module.scss';
@@ -47,6 +48,7 @@ export const SelectMultiValue = ({
   removeProps,
   ...props
 }: MultiValueType): JSX.Element | null => {
+  const { getLabel } = useLabels();
   const { isSingleRow, visibleCount } = useSelectTagsContext();
 
   if (props.data.value === SELECT_ALL_VALUE || isGroupSentinel(props.data)) {
@@ -88,6 +90,11 @@ export const SelectMultiValue = ({
           isTagRemovable
             ? {
                 tabIndex: 0,
+                // Name the button "Remove <option>" so screen readers say which
+                // tag is removed, instead of a bare "Close".
+                title: `${getLabel('remove')} ${
+                  typeof props.data.label === 'string' ? props.data.label : props.data.value
+                }`,
                 onMouseDown: (event) => event.stopPropagation(),
                 onKeyDown: handleCloseKeyDown,
               }
diff --git a/src/tedi/components/form/select/select.module.scss b/src/tedi/components/form/select/select.module.scss
index fda94863e..03742ab19 100644
--- a/src/tedi/components/form/select/select.module.scss
+++ b/src/tedi/components/form/select/select.module.scss
@@ -41,6 +41,10 @@ div.tedi-select__control {
   color: var(--form-input-text-filled);
 }
 
+.tedi-select__control :global(.select__placeholder) {
+  color: var(--form-input-text-placeholder);
+}
+
 .tedi-select--invalid .tedi-select__control {
   border-color: var(--form-general-feedback-error-border);
 
@@ -254,18 +258,6 @@ div.tedi-select__multi-value-item {
   margin: -0.125rem -0.25rem -0.125rem 0;
 }
 
-:global {
-  .tedi-select__value-container {
-    gap: var(--form-field-inner-spacing);
-    padding: 0 !important;
-
-    .tedi-select__placeholder {
-      color: var(--form-input-text-placeholder);
-      pointer-events: none;
-    }
-  }
-}
-
 .tedi-select--tags-row {
   :global .select__control > .select__value-container--is-multi {
     flex-wrap: nowrap;
diff --git a/src/tedi/components/form/select/select.spec.tsx b/src/tedi/components/form/select/select.spec.tsx
index 098afbef5..9cee08081 100644
--- a/src/tedi/components/form/select/select.spec.tsx
+++ b/src/tedi/components/form/select/select.spec.tsx
@@ -341,7 +341,7 @@ describe('Select component', () => {
   it('stops event propagation on mouse down when closing a removable tag', () => {
     const stopPropagationSpy = jest.spyOn(Event.prototype, 'stopPropagation');
     render(<Select {...defaultProps} multiple value={[basicOptions[0]]} isTagRemovable />);
-    const closeButton = screen.getByRole('button', { name: /close/i });
+    const closeButton = screen.getByRole('button', { name: /remove/i });
 
     fireEvent.mouseDown(closeButton);
     expect(stopPropagationSpy).toHaveBeenCalled();
@@ -567,7 +567,7 @@ describe('Select component', () => {
       />
     );
 
-    const closeButtons = screen.getAllByRole('button', { name: /close/i });
+    const closeButtons = screen.getAllByRole('button', { name: /remove/i });
     await act(async () => {
       await userEvent.click(closeButtons[0]);
     });
@@ -708,4 +708,33 @@ describe('Select component', () => {
       });
     });
   });
+
+  describe('accessibility', () => {
+    it('associates the label with the combobox even without an explicit id', () => {
+      // Regression: `inputId`/`instanceId` used the raw `id` prop, so with no id
+      // the input became "undefined-input" and no longer matched the label.
+      render(<Select label="Choose a fruit" options={basicOptions} onChange={jest.fn()} />);
+      expect(screen.getByRole('combobox')).toHaveAccessibleName('Choose a fruit');
+    });
+
+    it('describes the combobox with the helper text, not the placeholder', () => {
+      render(
+        <Select
+          {...defaultProps}
+          placeholder="Pick one"
+          helper={{ id: 'fruit-help', text: 'Only ripe fruit', type: 'error' }}
+        />
+      );
+
+      const combobox = screen.getByRole('combobox');
+      expect(combobox).toHaveAccessibleDescription('Only ripe fruit');
+      // react-select's placeholder must not describe the field.
+      expect(combobox.getAttribute('aria-describedby') ?? '').not.toMatch(/-placeholder/);
+    });
+
+    it('gives each tag remove button an accessible name including the option label', () => {
+      render(<Select {...defaultProps} multiple value={[{ value: 'apple', label: 'Apple' }]} isTagRemovable />);
+      expect(screen.getByRole('button', { name: /remove Apple/i })).toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/tedi/components/form/select/select.stories.tsx b/src/tedi/components/form/select/select.stories.tsx
index cb65be489..84b11b088 100644
--- a/src/tedi/components/form/select/select.stories.tsx
+++ b/src/tedi/components/form/select/select.stories.tsx
@@ -58,7 +58,7 @@ const TemplateSizes: StoryFn = (args) => (
           <Text modifiers="bold">Default</Text>
         </Col>
         <Col lg={10} xs={12}>
-          <Select label={args.label} id="select-size-default" {...args} />
+          <Select label={args.label} {...args} id="select-size-default" />
         </Col>
       </Row>
       <Row className="padding-14-16">
@@ -66,7 +66,7 @@ const TemplateSizes: StoryFn = (args) => (
           <Text modifiers="bold">Small</Text>
         </Col>
         <Col lg={10} xs={12}>
-          <Select label={args.label} size="small" id="select-size-default" {...args} />
+          <Select label={args.label} size="small" {...args} id="select-size-small" />
         </Col>
       </Row>
     </Col>
diff --git a/src/tedi/components/form/select/select.tsx b/src/tedi/components/form/select/select.tsx
index 10c60bcf3..015a67d82 100644
--- a/src/tedi/components/form/select/select.tsx
+++ b/src/tedi/components/form/select/select.tsx
@@ -414,7 +414,6 @@ export const Select = forwardRef<SelectInstance<ISelectOption, boolean, IGrouped
     const {
       options,
       defaultOptions,
-      id,
       name,
       iconName = 'arrow_drop_down',
       label,
@@ -697,7 +696,7 @@ export const Select = forwardRef<SelectInstance<ISelectOption, boolean, IGrouped
           aria-describedby={helperId}
           autoFocus={autoFocus}
           ref={element}
-          instanceId={id}
+          instanceId={resolvedId}
           className="tedi-select__wrapper"
           name={name}
           options={optionsForReactSelect}
@@ -710,7 +709,7 @@ export const Select = forwardRef<SelectInstance<ISelectOption, boolean, IGrouped
           onInputChange={onInputChange}
           onBlur={onBlur}
           inputValue={inputValue}
-          inputId={`${id}-input`}
+          inputId={`${resolvedId}-input`}
           loadOptions={loadOptions}
           isLoading={isLoading}
           noOptionsMessage={noOptionsMessage || getNoOptionsMessage}

From 625b9103b54dc08da68eba6a9120f91c73cd30a1 Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Wed, 29 Jul 2026 13:12:34 +0300
Subject: [PATCH 2/4] fix(select): cr fixes #58

---
 .../components/form/select/select.spec.tsx    | 15 +++++++++++++
 .../components/form/select/select.stories.tsx | 21 ++-----------------
 src/tedi/components/form/select/select.tsx    | 12 +++++++++--
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/tedi/components/form/select/select.spec.tsx b/src/tedi/components/form/select/select.spec.tsx
index 9cee08081..ba3e21c94 100644
--- a/src/tedi/components/form/select/select.spec.tsx
+++ b/src/tedi/components/form/select/select.spec.tsx
@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { UnknownType } from '../../../types/commonTypes';
+import InputGroup from '../input-group/input-group';
 import { SelectMultiValueRemove } from './components/select-multi-value-remove';
 import { ISelectOption, Select, SelectProps } from './select';
 
@@ -736,5 +737,19 @@ describe('Select component', () => {
       render(<Select {...defaultProps} multiple value={[{ value: 'apple', label: 'Apple' }]} isTagRemovable />);
       expect(screen.getByRole('button', { name: /remove Apple/i })).toBeInTheDocument();
     });
+
+    it('keeps the combobox named by the label of a surrounding labeled InputGroup', () => {
+      // Regression: the group renders <label htmlFor={inputGroup.inputId}> and Select
+      // hides its own label, so the combobox input (not the container) must own that id.
+      render(
+        <InputGroup id="fruit-group" label="Choose a fruit">
+          <Select options={basicOptions} onChange={jest.fn()} />
+        </InputGroup>
+      );
+
+      const combobox = screen.getByRole('combobox');
+      expect(combobox).toHaveAccessibleName('Choose a fruit');
+      expect(combobox).toHaveAttribute('id', 'fruit-group');
+    });
   });
 });
diff --git a/src/tedi/components/form/select/select.stories.tsx b/src/tedi/components/form/select/select.stories.tsx
index 84b11b088..4d9166284 100644
--- a/src/tedi/components/form/select/select.stories.tsx
+++ b/src/tedi/components/form/select/select.stories.tsx
@@ -33,23 +33,6 @@ const options = [
   { value: 'haapsalu', label: 'Haapsalu' },
 ];
 
-const groupedOptions: OptionsOrGroups<ISelectOption, IGroupedOptions<ISelectOption>> = [
-  {
-    label: 'American cities',
-    options: [
-      { value: 'new-york', label: 'New York' },
-      { value: 'dallas', label: 'Dallas' },
-    ],
-  },
-  {
-    label: 'Estonian cities',
-    options: [
-      { value: 'tallinn', label: 'Tallinn' },
-      { value: 'tartu', label: 'Tartu' },
-    ],
-  },
-];
-
 const TemplateSizes: StoryFn = (args) => (
   <Row>
     <Col lg={12} xs={12} className="example-list">
@@ -58,7 +41,7 @@ const TemplateSizes: StoryFn = (args) => (
           <Text modifiers="bold">Default</Text>
         </Col>
         <Col lg={10} xs={12}>
-          <Select label={args.label} {...args} id="select-size-default" />
+          <Select {...args} id="select-size-default" />
         </Col>
       </Row>
       <Row className="padding-14-16">
@@ -66,7 +49,7 @@ const TemplateSizes: StoryFn = (args) => (
           <Text modifiers="bold">Small</Text>
         </Col>
         <Col lg={10} xs={12}>
-          <Select label={args.label} size="small" {...args} id="select-size-small" />
+          <Select {...args} size="small" id="select-size-small" />
         </Col>
       </Row>
     </Col>
diff --git a/src/tedi/components/form/select/select.tsx b/src/tedi/components/form/select/select.tsx
index 015a67d82..babd96744 100644
--- a/src/tedi/components/form/select/select.tsx
+++ b/src/tedi/components/form/select/select.tsx
@@ -473,6 +473,14 @@ export const Select = forwardRef<SelectInstance<ISelectOption, boolean, IGrouped
     const shouldHideLabel = inputGroup?.hasExternalLabel;
     const resolvedId = props.id ?? inputGroup?.inputId ?? generatedId;
 
+    // The visible <label> that names the combobox is rendered either by Select
+    // itself (own FormLabel, targeting `${resolvedId}-input`) or, when nested in
+    // a labeled InputGroup, by the group (targeting `inputGroup.inputId`). The
+    // focusable input must own whichever id the label's `htmlFor` points at, and
+    // react-select's container needs a *different* id so the two never collide.
+    const inputId = shouldHideLabel ? inputGroup?.inputId ?? resolvedId : `${resolvedId}-input`;
+    const containerId = shouldHideLabel ? `${resolvedId}-container` : resolvedId;
+
     const helperId = helper ? helper?.id ?? `${resolvedId}-helper` : undefined;
     const element = React.useRef<SelectInstance<ISelectOption, boolean, IGroupedOptions<ISelectOption>> | null>(null);
     const { getLabel } = useLabels();
@@ -692,7 +700,7 @@ export const Select = forwardRef<SelectInstance<ISelectOption, boolean, IGrouped
           keyboardMode={keyboardMode}
           exitKeyboardMode={exitKeyboardMode}
           onKeyDown={handleSelectKeyDown}
-          id={resolvedId}
+          id={containerId}
           aria-describedby={helperId}
           autoFocus={autoFocus}
           ref={element}
@@ -709,7 +717,7 @@ export const Select = forwardRef<SelectInstance<ISelectOption, boolean, IGrouped
           onInputChange={onInputChange}
           onBlur={onBlur}
           inputValue={inputValue}
-          inputId={`${resolvedId}-input`}
+          inputId={inputId}
           loadOptions={loadOptions}
           isLoading={isLoading}
           noOptionsMessage={noOptionsMessage || getNoOptionsMessage}

From 05e627cd6c97064525066ed7313c1b1a6af971a9 Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Wed, 29 Jul 2026 14:05:58 +0300
Subject: [PATCH 3/4] feat(select): defer mobile keyboard on touch #551

---
 .../form/select/components/select-input.tsx   |  1 +
 .../components/form/select/select.spec.tsx    | 56 +++++++++++++++++++
 .../components/form/select/select.stories.tsx | 23 ++++++++
 src/tedi/components/form/select/select.tsx    | 42 +++++++++++++-
 4 files changed, 120 insertions(+), 2 deletions(-)

diff --git a/src/tedi/components/form/select/components/select-input.tsx b/src/tedi/components/form/select/components/select-input.tsx
index 3d83ccbd8..81c090b43 100644
--- a/src/tedi/components/form/select/components/select-input.tsx
+++ b/src/tedi/components/form/select/components/select-input.tsx
@@ -27,6 +27,7 @@ export const SelectInput = (props: InputProps<ISelectOption, boolean>): JSX.Elem
       aria-required={props.selectProps.required}
       required={props.selectProps.required}
       aria-describedby={describedBy}
+      inputMode={props.selectProps.softKeyboardSuppressed ? 'none' : undefined}
     />
   );
 };
diff --git a/src/tedi/components/form/select/select.spec.tsx b/src/tedi/components/form/select/select.spec.tsx
index ba3e21c94..896f5bc15 100644
--- a/src/tedi/components/form/select/select.spec.tsx
+++ b/src/tedi/components/form/select/select.spec.tsx
@@ -752,4 +752,60 @@ describe('Select component', () => {
       expect(combobox).toHaveAttribute('id', 'fruit-group');
     });
   });
+
+  describe('openKeyboardOnTouch (mobile soft keyboard)', () => {
+    const getControl = (combobox: HTMLElement) => combobox.closest('.tedi-select__control') as HTMLElement;
+
+    // jsdom's synthetic PointerEvent doesn't reliably carry `pointerType`, so set
+    // it explicitly on the native event React reads from.
+    const firePointerDown = (el: Element, pointerType: 'touch' | 'pen' | 'mouse') => {
+      const event = new Event('pointerdown', { bubbles: true, cancelable: true });
+      Object.defineProperty(event, 'pointerType', { value: pointerType });
+      fireEvent(el, event);
+    };
+
+    it('does not suppress the soft keyboard by default', () => {
+      render(<Select {...defaultProps} />);
+      const combobox = screen.getByRole('combobox');
+      firePointerDown(getControl(combobox), 'touch');
+      expect(combobox).not.toHaveAttribute('inputmode', 'none');
+    });
+
+    it('suppresses the soft keyboard when opened by touch and openKeyboardOnTouch is false', () => {
+      render(<Select {...defaultProps} openKeyboardOnTouch={false} />);
+      const combobox = screen.getByRole('combobox');
+      firePointerDown(getControl(combobox), 'touch');
+      // inputMode="none" keeps the on-screen keyboard down while browsing.
+      expect(combobox).toHaveAttribute('inputmode', 'none');
+    });
+
+    it('raises the keyboard again once the user taps the search input directly', () => {
+      render(<Select {...defaultProps} openKeyboardOnTouch={false} />);
+      const combobox = screen.getByRole('combobox');
+
+      firePointerDown(getControl(combobox), 'touch');
+      expect(combobox).toHaveAttribute('inputmode', 'none');
+
+      firePointerDown(combobox, 'touch');
+      expect(combobox).not.toHaveAttribute('inputmode', 'none');
+    });
+
+    it('never suppresses the keyboard for mouse users, even when openKeyboardOnTouch is false', () => {
+      render(<Select {...defaultProps} openKeyboardOnTouch={false} />);
+      const combobox = screen.getByRole('combobox');
+      firePointerDown(getControl(combobox), 'mouse');
+      expect(combobox).not.toHaveAttribute('inputmode', 'none');
+    });
+
+    it('resets the suppression when the field loses focus', () => {
+      render(<Select {...defaultProps} openKeyboardOnTouch={false} />);
+      const combobox = screen.getByRole('combobox');
+
+      firePointerDown(getControl(combobox), 'touch');
+      expect(combobox).toHaveAttribute('inputmode', 'none');
+
+      fireEvent.blur(combobox);
+      expect(combobox).not.toHaveAttribute('inputmode', 'none');
+    });
+  });
 });
diff --git a/src/tedi/components/form/select/select.stories.tsx b/src/tedi/components/form/select/select.stories.tsx
index 4d9166284..c98950bfa 100644
--- a/src/tedi/components/form/select/select.stories.tsx
+++ b/src/tedi/components/form/select/select.stories.tsx
@@ -726,3 +726,26 @@ export const EditableSelect: Story = {
     label: 'Editable label',
   },
 };
+
+/**
+ * **Mobile keyboard deferral.** For quick-pick searchable selects, the on-screen
+ * keyboard popping up the instant the menu opens can cover most of the screen.
+ * With `openKeyboardOnTouch={false}`, tapping the field on a touch/pen device
+ * opens the menu for browsing **without** raising the keyboard — the input is
+ * rendered with `inputMode="none"`. The keyboard appears only when the user
+ * taps the search input directly.
+ *
+ * This is touch-only: mouse and keyboard users are unaffected, and hardware
+ * typing is never blocked, so the combobox stays fully operable (WCAG 2.1.1).
+ * Best viewed on a real device or the Storybook mobile viewport.
+ */
+export const DeferKeyboardOnTouch: Story = {
+  args: {
+    id: 'defer-keyboard-example',
+    label: 'Address',
+    placeholder: 'Vali...',
+    options: options,
+    openKeyboardOnTouch: false,
+    isSearchable: true,
+  },
+};
diff --git a/src/tedi/components/form/select/select.tsx b/src/tedi/components/form/select/select.tsx
index babd96744..d19fcb4d7 100644
--- a/src/tedi/components/form/select/select.tsx
+++ b/src/tedi/components/form/select/select.tsx
@@ -49,6 +49,8 @@ import styles from './select.module.scss';
 declare module 'react-select/dist/declarations/src/Select' {
   export interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
     inputIsHidden?: boolean;
+    /** When true, the search input is rendered with `inputMode="none"` so the mobile soft keyboard stays down. */
+    softKeyboardSuppressed?: boolean;
   }
 }
 
@@ -292,6 +294,18 @@ export interface SelectProps extends Omit<FormLabelProps, 'id' | 'label'> {
    * @default true
    */
   isSearchable?: boolean;
+  /**
+   * Touch-only UX for searchable selects. When `false`, tapping the field on a
+   * touch or pen device opens the menu for browsing **without** raising the
+   * on-screen keyboard (the input is marked `inputMode="none"`). The keyboard
+   * appears only once the user explicitly taps the search input — so a
+   * quick-pick dropdown doesn't immediately cover the screen with a keyboard.
+   *
+   * Has no effect for mouse/keyboard users and never blocks hardware-keyboard
+   * typing, so the combobox stays fully operable (WCAG 2.1.1 Keyboard).
+   * @default true
+   */
+  openKeyboardOnTouch?: boolean;
   /**
    * In multi-select mode, render an "×" remove button on each selected tag
    * so the user can deselect single options without re-opening the menu.
@@ -453,6 +467,7 @@ export const Select = forwardRef<SelectInstance<ISelectOption, boolean, IGrouped
       isClearable = true,
       isClearIndicatorVisible = false,
       isSearchable = true,
+      openKeyboardOnTouch = true,
       menuIsOpen,
       onMenuClose,
       onMenuOpen,
@@ -490,6 +505,28 @@ export const Select = forwardRef<SelectInstance<ISelectOption, boolean, IGrouped
       () => element.current as SelectInstance<ISelectOption, boolean, IGroupedOptions<ISelectOption>>
     );
 
+    // Touch-only keyboard deferral (see `openKeyboardOnTouch`). Tapping the field
+    // to *open* it suppresses the soft keyboard (`inputMode="none"`); tapping the
+    // input *itself* clears the flag so typing can raise the keyboard. Mouse and
+    // keyboard users are never affected, and hardware typing is never blocked.
+    const [suppressSoftKeyboard, setSuppressSoftKeyboard] = React.useState(false);
+
+    const handlePointerDownCapture = (event: React.PointerEvent<HTMLDivElement>) => {
+      if (openKeyboardOnTouch || !isSearchable) return;
+      if (event.pointerType !== 'touch' && event.pointerType !== 'pen') return;
+
+      const inputEl = element.current?.inputRef;
+      const tappedInput = !!inputEl && (event.target === inputEl || inputEl.contains(event.target as Node));
+      setSuppressSoftKeyboard(!tappedInput);
+    };
+
+    const handleBlur = () => {
+      // Reset when the field is left so an idle field never lingers with the
+      // keyboard suppressed; the next touch-open re-evaluates from scratch.
+      setSuppressSoftKeyboard(false);
+      onBlur?.();
+    };
+
     const showSelectAllMode = !!showSelectAll && multiple;
 
     const [internalValue, setInternalValue] = React.useState<TSelectValue>(defaultValue ?? null);
@@ -715,7 +752,8 @@ export const Select = forwardRef<SelectInstance<ISelectOption, boolean, IGrouped
           onChange={onChangeHandler}
           filterOption={showSelectAllMode || selectableGroupsMode ? filterOption : undefined}
           onInputChange={onInputChange}
-          onBlur={onBlur}
+          onBlur={handleBlur}
+          softKeyboardSuppressed={suppressSoftKeyboard}
           inputValue={inputValue}
           inputId={inputId}
           loadOptions={loadOptions}
@@ -790,7 +828,7 @@ export const Select = forwardRef<SelectInstance<ISelectOption, boolean, IGrouped
     );
 
     return (
-      <div data-name="select" className={SelectBEM}>
+      <div data-name="select" className={SelectBEM} onPointerDownCapture={handlePointerDownCapture}>
         <div className={styles['tedi-select__inner']}>
           {!shouldHideLabel && (
             <FormLabel

From b27ea981ec44b80efb94a2ef5e794c679329b9c8 Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Wed, 29 Jul 2026 14:14:44 +0300
Subject: [PATCH 4/4] fix(select): cr fixes #58

---
 .../components/form/select/select.spec.tsx    | 25 +++++++++++++++++++
 src/tedi/components/form/select/select.tsx    |  7 ++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/tedi/components/form/select/select.spec.tsx b/src/tedi/components/form/select/select.spec.tsx
index 896f5bc15..1db291d80 100644
--- a/src/tedi/components/form/select/select.spec.tsx
+++ b/src/tedi/components/form/select/select.spec.tsx
@@ -807,5 +807,30 @@ describe('Select component', () => {
       fireEvent.blur(combobox);
       expect(combobox).not.toHaveAttribute('inputmode', 'none');
     });
+
+    it('does not suppress the keyboard when the label or helper text is tapped', () => {
+      const { container } = render(
+        <Select {...defaultProps} openKeyboardOnTouch={false} helper={{ text: 'Pick a fruit', type: 'hint' }} />
+      );
+      const combobox = screen.getByRole('combobox');
+
+      const label = container.querySelector('label') as HTMLElement;
+      firePointerDown(label, 'touch');
+      expect(combobox).not.toHaveAttribute('inputmode', 'none');
+
+      firePointerDown(screen.getByText('Pick a fruit'), 'touch');
+      expect(combobox).not.toHaveAttribute('inputmode', 'none');
+    });
+
+    it('stops forwarding inputMode="none" once the feature is turned off, even if still suppressed', () => {
+      const { rerender } = render(<Select {...defaultProps} openKeyboardOnTouch={false} />);
+      const combobox = screen.getByRole('combobox');
+
+      firePointerDown(getControl(combobox), 'touch');
+      expect(combobox).toHaveAttribute('inputmode', 'none');
+
+      rerender(<Select {...defaultProps} openKeyboardOnTouch={true} />);
+      expect(combobox).not.toHaveAttribute('inputmode', 'none');
+    });
   });
 });
diff --git a/src/tedi/components/form/select/select.tsx b/src/tedi/components/form/select/select.tsx
index d19fcb4d7..7acb8a9f4 100644
--- a/src/tedi/components/form/select/select.tsx
+++ b/src/tedi/components/form/select/select.tsx
@@ -515,8 +515,11 @@ export const Select = forwardRef<SelectInstance<ISelectOption, boolean, IGrouped
       if (openKeyboardOnTouch || !isSearchable) return;
       if (event.pointerType !== 'touch' && event.pointerType !== 'pen') return;
 
+      const targetEl = event.target as HTMLElement;
+      if (!targetEl.closest?.(`.${styles['tedi-select__control']}`)) return;
+
       const inputEl = element.current?.inputRef;
-      const tappedInput = !!inputEl && (event.target === inputEl || inputEl.contains(event.target as Node));
+      const tappedInput = !!inputEl && (event.target === inputEl || inputEl.contains(targetEl));
       setSuppressSoftKeyboard(!tappedInput);
     };
 
@@ -753,7 +756,7 @@ export const Select = forwardRef<SelectInstance<ISelectOption, boolean, IGrouped
           filterOption={showSelectAllMode || selectableGroupsMode ? filterOption : undefined}
           onInputChange={onInputChange}
           onBlur={handleBlur}
-          softKeyboardSuppressed={suppressSoftKeyboard}
+          softKeyboardSuppressed={!openKeyboardOnTouch && isSearchable && suppressSoftKeyboard}
           inputValue={inputValue}
           inputId={inputId}
           loadOptions={loadOptions}