@transferwise/components 0.0.0-experimental-4658255 → 0.0.0-experimental-07a2614

package/build/styles/main.css

@@ -3524,6 +3524,13 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
 }
+.wds-select-input-scroll-freeze {
+  scroll-behavior: unset !important;
+  height: 100vh;
+}
+.wds-select-input-scroll-freeze body {
+  height: 100vh;
+}
 .np-bottom-sheet-v2-container {
   position: relative;
   z-index: 1060;
@@ -3537,6 +3544,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
+  will-change: transform;
+  min-height: 100vh;
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
@@ -3544,7 +3553,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
-  bottom: env(keyboard-inset-height, 0px);
+  bottom: env(safe-area-inset-bottom, 0);
   margin-left: 8px;
   margin-left: var(--size-8);
   margin-right: 8px;
@@ -3554,18 +3563,21 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+  height: calc(100vh - 64px - 40px);
+  height: calc(100vh - var(--size-64) - 40px);
 }
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
-  border-top-left-radius: 32px;
-  /* TODO: Tokenize */
-  border-top-right-radius: 32px;
-  /* TODO: Tokenize */
+  border-radius: 32px;
+  border-radius: var(--size-32);
+  margin-bottom: 8px;
+  margin-bottom: var(--size-8);
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
+  will-change: transform;
 }
 .np-bottom-sheet-v2-content:focus {
   outline: none;

package/build/types/inputs/SelectInput.d.ts

@@ -32,25 +32,6 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
     multiple?: M;
     placeholder?: string;
     items: readonly SelectInputItem<NonNullable<T>>[];
-    /**
-     * Enables browser autocomplete integration through the search input.
-     * Accepts standard HTML autocomplete values (e.g., "country-name", "address-level1").
-     *
-     * Requires `filterable={true}` to enable the search input.
-     *
-     * @example
-     * <SelectInput
-     *   name="country"
-     *   autocomplete="country-name"
-     *   filterable={true}
-     *   items={[{
-     *     type: 'option',
-     *     value: 'GB',
-     *     filterMatchers: ['United Kingdom', 'UK']
-     *   }]}
-     * />
-     */
-    autocomplete?: string;
     defaultValue?: M extends true ? readonly T[] : T;
     value?: M extends true ? readonly T[] : T;
     compareValues?: (keyof NonNullable<T> & string) | ((a: T | undefined, b: T | undefined) => boolean);
@@ -86,7 +67,7 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
     onClose?: () => void;
     onClear?: () => void;
 }
-export declare function SelectInput<T = string, M extends boolean = false>({ id: idProp, parentId, name, multiple, placeholder, autocomplete, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, disabled, size, className, UNSAFE_triggerButtonProps, triggerRef: externalTriggerRef, onFilterChange, onChange, onOpen, onClose, onClear, }: SelectInputProps<T, M>): import("react").JSX.Element;
+export declare function SelectInput<T = string, M extends boolean = false>({ id: idProp, parentId, name, multiple, placeholder, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, disabled, size, className, UNSAFE_triggerButtonProps, triggerRef: externalTriggerRef, onFilterChange, onChange, onOpen, onClose, onClear, }: SelectInputProps<T, M>): import("react").JSX.Element;
 type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
 export type SelectInputTriggerButtonProps<T extends SelectInputTriggerButtonElementType = 'button'> = Merge<React.ComponentPropsWithoutRef<T>, {
     as?: T;

package/build/types/inputs/SelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,SAAS,EAQV,MAAM,OAAO,CAAC;AASf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,OAAO,EAAsB,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAM1E,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAsBrD,MAAM,WAAW,qBAAqB,CAAC,CAAC,GAAG,MAAM;IAC/C,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,CAAC,CAAC;IACT,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,GAAG,MAAM;IAC9C,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,SAAS,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7C,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,MAAM,IAClC,qBAAqB,CAAC,CAAC,CAAC,GACxB,oBAAoB,CAAC,CAAC,CAAC,GACvB,wBAAwB,CAAC;AAiE7B,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,SAAS,OAAO,GAAG,KAAK;IACrE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,SAAS,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,SAAS,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,CAAC,CAAC;IACjD,KAAK,CAAC,EAAE,CAAC,SAAS,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,CAAC,CAAC;IAC1C,aAAa,CAAC,EACV,CAAC,MAAM,WAAW,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAC/B,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,CAAC,GAAG,SAAS,KAAK,OAAO,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACjF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QACpB,YAAY,EAAE,OAAO,CAAC;QACtB,eAAe,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;KAC5C,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,gBAAgB,EAAE,OAAO,CAAC;QAC1B,KAAK,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;QAChC,QAAQ,EAAE,OAAO,CAAC;QAClB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;QACzB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;KAC/B,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB,CAAC,EAAE,wBAAwB,CAAC,iBAAiB,CAAC,GAAG;QACxE,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,gDAAgD;IAChD,UAAU,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC9D,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACnF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,SAAS,IAAI,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA+DD,wBAAgB,WAAW,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,SAAS,OAAO,GAAG,KAAK,EAAE,EACjE,EAAE,EAAE,MAAM,EACV,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,WAAoB,EACpB,YAAY,EACZ,aAAoC,EACpC,UAAU,EACV,iBAAiB,EACjB,QAAQ,EACR,IAAW,EACX,SAAS,EACT,yBAAyB,EACzB,UAAU,EAAE,kBAAkB,EAC9B,cAAqB,EACrB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,GACR,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,+BA6LxB;AAUD,KAAK,mCAAmC,GAAG,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC;AAE1E,MAAM,MAAM,6BAA6B,CACvC,CAAC,SAAS,mCAAmC,GAAG,QAAQ,IACtD,KAAK,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC;AAEzD,wBAAgB,wBAAwB,CAAC,CAAC,SAAS,mCAAmC,GAAG,QAAQ,EAAE,EACjG,EAAkB,EAClB,GAAG,SAAS,EACb,EAAE,6BAA6B,CAAC,CAAC,CAAC,+BAclC;AAsbD,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,GACL,EAAE,6BAA6B,+BAiD/B"}

package/build/types/inputs/_BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BA6FlB"}
+{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAeD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BAiGlB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-4658255",
+  "version": "0.0.0-experimental-07a2614",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -102,8 +102,8 @@
     "@floating-ui/react": "^0.27.16",
     "@headlessui/react": "^1.7.19",
     "@popperjs/core": "^2.11.8",
-    "@react-aria/focus": "^3.21.0",
-    "@react-aria/overlays": "^3.28.0",
+    "@react-aria/focus": "^3.21.1",
+    "@react-aria/overlays": "^3.29.1",
     "@react-spring/web": "~10.0.1",
     "@transferwise/formatting": "^2.13.4",
     "@transferwise/neptune-validation": "^3.3.1",

package/src/common/bottomSheet/BottomSheet.test.story.tsx

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+import { lorem100, lorem500 } from '../../test-utils';
+import { Typography } from '../propsValues/typography';
+import Alert from '../../alert';
+import Body from '../../body';
+import Button from '../../button';
+import Title from '../../title';
+import BottomSheet from './BottomSheet';
+
+const wait = async (duration = 500) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, duration);
+  });
+
+export default {
+  component: BottomSheet,
+  title: 'Dialogs/BottomSheet/tests',
+  tags: ['!autodocs'],
+  args: {
+    open: false,
+  },
+} satisfies Meta<typeof BottomSheet>;
+
+type Story = StoryObj<typeof BottomSheet>;
+
+/**
+ * This test ensures that when the SelectInput is used within a scrollable page,
+ * opening the dropdown does not cause any unwanted scrolling or layout shifts.
+ * Expected preview should start with green bar at the top, with yellow section
+ * not in the viewport.
+ *
+ * NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
+ */
+export const SmoothScrollReset: Story = {
+  args: {
+    children: (
+      <>
+        <Title type={Typography.TITLE_SECTION}>Observe the document</Title>
+        <Alert className="m-t-2" type="warning">
+          Once the <code>BottomSheet</code> opens, the document underneath should be static and
+          should not scroll.
+        </Alert>
+        <Body as="p">{lorem100}</Body>
+        <Body as="p">{lorem100}</Body>
+      </>
+    ),
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <style>{'html { scroll-behavior: smooth; }'}</style>
+        <div style={{ maxWidth: 500 }}>
+          <Body>
+            <p>{lorem100}</p>
+            <p>{lorem100}</p>
+          </Body>
+          <Story />
+          <Body as="p" className="m-t-5 disabled">
+            {lorem500}
+          </Body>
+        </div>
+      </>
+    ),
+  ],
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    document.documentElement.scrollTop = 400;
+    await wait(500);
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+  },
+  render: ({ open, ...args }) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div>
+        <Button onClick={() => setIsOpen(true)}>Open BottomSheet</Button>
+        <BottomSheet
+          {...args}
+          open={isOpen}
+          onClose={() => {
+            setIsOpen(false);
+          }}
+        />
+      </div>
+    );
+  },
+};

package/src/inputs/SelectInput.css

@@ -1,3 +1,10 @@
+.wds-select-input-scroll-freeze {
+  scroll-behavior: unset !important;
+  height: 100vh;
+}
+.wds-select-input-scroll-freeze body {
+  height: 100vh;
+}
 .np-bottom-sheet-v2-container {
   position: relative;
   z-index: 1060;
@@ -11,6 +18,8 @@
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
+  will-change: transform;
+  min-height: 100vh;
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
@@ -18,7 +27,7 @@
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
-  bottom: env(keyboard-inset-height, 0px);
+  bottom: env(safe-area-inset-bottom, 0);
   margin-left: 8px;
   margin-left: var(--size-8);
   margin-right: 8px;
@@ -28,18 +37,21 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+  height: calc(100vh - 64px - 40px);
+  height: calc(100vh - var(--size-64) - 40px);
 }
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
-  border-top-left-radius: 32px;
-  /* TODO: Tokenize */
-  border-top-right-radius: 32px;
-  /* TODO: Tokenize */
+  border-radius: 32px;
+  border-radius: var(--size-32);
+  margin-bottom: 8px;
+  margin-bottom: var(--size-8);
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
+  will-change: transform;
 }
 .np-bottom-sheet-v2-content:focus {
   outline: none;

package/src/inputs/SelectInput.spec.tsx

@@ -3,13 +3,21 @@ import { userEvent } from '@testing-library/user-event';
 
 import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
 
+import { useScreenSize } from '../common/hooks/useScreenSize';
 import { SelectInput, type SelectInputOptionItem, type SelectInputProps } from './SelectInput';
 import { Field } from '../field/Field';
 
 mockMatchMedia();
 mockResizeObserver();
+jest.mock('../common/hooks/useScreenSize');
 
 describe('SelectInput', () => {
+  beforeEach(() => {
+    (useScreenSize as jest.Mock).mockReturnValue(true);
+  });
+
+  afterEach(jest.clearAllMocks);
+
   it('renders placeholder', () => {
     render(
       <SelectInput
@@ -309,4 +317,29 @@ describe('SelectInput', () => {
       expect(listBox).not.toHaveAttribute('aria-labelledby');
     });
   });
+
+  describe('smooth scroll reset', () => {
+    const options: SelectInputOptionItem[] = [
+      { type: 'option', value: 'Banana' },
+      { type: 'option', value: 'Orange' },
+      { type: 'option', value: 'Olive' },
+    ];
+
+    beforeEach(() => {
+      (useScreenSize as jest.Mock).mockReturnValue(false);
+    });
+
+    afterEach(jest.clearAllMocks);
+
+    it('toggles scroll-resetting class', async () => {
+      render(<SelectInput items={options} />);
+      expect(document.documentElement).not.toHaveClass('wds-select-input-scroll-freeze');
+
+      await userEvent.click(screen.getByRole('combobox'));
+      expect(document.documentElement).toHaveClass('wds-select-input-scroll-freeze');
+
+      await userEvent.click(document.documentElement);
+      expect(document.documentElement).not.toHaveClass('wds-select-input-scroll-freeze');
+    });
+  });
 });

package/src/inputs/SelectInput.story.tsx

@@ -516,97 +516,3 @@ export const WithinModal: Story<Currency> = {
     },
   ],
 };
-
-interface Country {
-  code: string;
-  name: string;
-}
-
-const countries: Country[] = [
-  { code: 'US', name: 'United States' },
-  { code: 'GB', name: 'United Kingdom' },
-  { code: 'CA', name: 'Canada' },
-  { code: 'AU', name: 'Australia' },
-  { code: 'DE', name: 'Germany' },
-  { code: 'FR', name: 'France' },
-  { code: 'JP', name: 'Japan' },
-  { code: 'BR', name: 'Brazil' },
-  { code: 'IN', name: 'India' },
-  { code: 'CN', name: 'China' },
-  { code: 'IT', name: 'Italy' },
-  { code: 'ES', name: 'Spain' },
-  { code: 'NL', name: 'Netherlands' },
-  { code: 'CH', name: 'Switzerland' },
-  { code: 'SE', name: 'Sweden' },
-];
-
-function countryOption(country: Country) {
-  return {
-    type: 'option',
-    value: country.code,
-    filterMatchers: [country.code, country.name],
-  } satisfies SelectInputItem;
-}
-
-export const WithAutocomplete: Story<string> = {
-  args: {
-    name: 'country',
-    autocomplete: 'country-name',
-    placeholder: 'Select your country',
-    items: countries.map(countryOption),
-    renderValue: (countryCode, withinTrigger) => {
-      const country = countries.find((c) => c.code === countryCode);
-      return (
-        <SelectInputOptionContent
-          title={withinTrigger ? countryCode : country?.name || countryCode}
-          note={withinTrigger ? undefined : countryCode}
-          icon={<Flag code={countryCode} intrinsicSize={24} />}
-        />
-      );
-    },
-    filterable: true,
-    filterPlaceholder: 'Type a country name',
-    size: 'lg',
-  },
-  render: function Render({ onChange, onClear, ...args }) {
-    const [selectedCountry, setSelectedCountry] = useState<string | undefined>(undefined);
-
-    return (
-      <div>
-        <form
-          method="post"
-          onSubmit={(e) => {
-            e.preventDefault();
-            console.log(
-              `Form submitted with country: ${selectedCountry}. This saves data for browser autocomplete!`,
-            );
-          }}
-        >
-          <div>
-            <label htmlFor="country-select" className="block text-sm font-medium mb-2">
-              Country Selection with Autocomplete:
-            </label>
-            <SelectInput
-              {...args}
-              id="country-select"
-              value={selectedCountry}
-              onChange={(country) => {
-                setSelectedCountry(country);
-                onChange?.(country);
-                console.log('Country selected via SelectInput:', country);
-              }}
-              onClear={() => {
-                setSelectedCountry(undefined);
-                onClear?.();
-              }}
-            />
-          </div>
-
-          <Button type="submit" v2 className="m-t-2" data-testid="submit-btn">
-            Submit Form
-          </Button>
-        </form>
-      </div>
-    );
-  },
-};

package/src/inputs/SelectInput.test.story.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn, type Mock, userEvent, within } from 'storybook/test';
+import { allModes } from '../../.storybook/modes';
+import { lorem5, lorem500 } from '../test-utils';
+import { Field } from '../field/Field';
+import Body from '../body';
+import { SelectInput, type SelectInputProps } from './SelectInput';
+
+const meta = {
+  title: 'Forms/SelectInput/tests',
+  component: SelectInput,
+  args: {
+    onFilterChange: fn() satisfies Mock,
+    onChange: fn() satisfies Mock,
+    onClose: fn() satisfies Mock,
+    onOpen: fn() satisfies Mock,
+  },
+  tags: ['!autodocs'],
+} satisfies Meta<typeof SelectInput>;
+export default meta;
+
+type Story<T, M extends boolean = false> = StoryObj<SelectInputProps<T, M>>;
+
+const wait = async (duration = 500) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, duration);
+  });
+
+/**
+ * This test ensures that when the SelectInput is used within a scrollable page,
+ * opening the dropdown does not cause any unwanted scrolling or layout shifts.
+ * Expected preview should start with green bar at the top, with yellow section
+ * not in the viewport.
+ *
+ * NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
+ */
+export const SmoothScrollReset: Story<string> = {
+  args: {
+    items: Array.from({ length: 15 }).map((_, id) => ({
+      type: 'option',
+      value: `option ${id + 1}`,
+    })),
+    placeholder: 'Select option',
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <style>{`html { scroll-behavior: smooth; }`}</style>
+        <div>
+          <div
+            className="d-flex align-items-center justify-content-center"
+            style={{
+              backgroundColor: 'var(--color-bright-yellow)',
+              height: 400,
+            }}
+          >
+            This block should not be in the viewport.
+          </div>
+          <div style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
+          <Field id="el1" label={lorem5}>
+            <Story />
+          </Field>
+          <Body as="p">{lorem500}</Body>
+        </div>
+      </>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    document.documentElement.scrollTop = 400;
+    await wait();
+    const canvas = within(canvasElement);
+    const triggerButton = canvas.getByRole('combobox');
+    await userEvent.click(triggerButton);
+  },
+  globals: {
+    viewport: { value: allModes.largeMobile.viewport, isRotated: false },
+  },
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+};

package/src/inputs/SelectInput.tsx

@@ -155,25 +155,6 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
   multiple?: M;
   placeholder?: string;
   items: readonly SelectInputItem<NonNullable<T>>[];
-  /**
-   * Enables browser autocomplete integration through the search input.
-   * Accepts standard HTML autocomplete values (e.g., "country-name", "address-level1").
-   *
-   * Requires `filterable={true}` to enable the search input.
-   *
-   * @example
-   * <SelectInput
-   *   name="country"
-   *   autocomplete="country-name"
-   *   filterable={true}
-   *   items={[{
-   *     type: 'option',
-   *     value: 'GB',
-   *     filterMatchers: ['United Kingdom', 'UK']
-   *   }]}
-   * />
-   */
-  autocomplete?: string;
   defaultValue?: M extends true ? readonly T[] : T;
   value?: M extends true ? readonly T[] : T;
   compareValues?:
@@ -276,7 +257,6 @@ export function SelectInput<T = string, M extends boolean = false>({
   name,
   multiple,
   placeholder,
-  autocomplete,
   items,
   defaultValue,
   value: controlledValue,
@@ -477,15 +457,7 @@ export function SelectInput<T = string, M extends boolean = false>({
               searchInputRef={searchInputRef}
               listboxRef={listboxRef}
               filterQuery={deferredFilterQuery}
-              autocomplete={autocomplete}
-              name={name}
               onFilterChange={setFilterQuery}
-              onAutocompleteSelect={(matchedValue) => {
-                onChange?.(matchedValue as M extends true ? T[] : T);
-                if (!multiple) {
-                  setOpen(false);
-                }
-              }}
               {...getListBoxLabelProps()}
             />
           </OptionsOverlay>
@@ -593,9 +565,6 @@ interface SelectInputOptionsProps<T = string>
   onFilterChange: (query: string) => void;
   listBoxLabel?: string;
   listBoxLabelledBy?: string;
-  autocomplete?: string;
-  name?: string;
-  onAutocompleteSelect?: (value: T) => void;
 }
 
 function SelectInputOptions<T = string>({
@@ -612,9 +581,6 @@ function SelectInputOptions<T = string>({
   onFilterChange,
   listBoxLabel,
   listBoxLabelledBy,
-  autocomplete,
-  name,
-  onAutocompleteSelect,
 }: SelectInputOptionsProps<T>) {
   const intl = useIntl();
   const virtualiserHandlerRef = useRef<VirtualizerHandle>(null);
@@ -698,35 +664,6 @@ function SelectInputOptions<T = string>({
     );
   };
 
-  const findMatchingItem = (autocompleteValue: string): T | null => {
-    const flatOptions = items
-      .flatMap((item) =>
-        item.type === 'group' ? item.options : item.type === 'option' ? [item] : [],
-      )
-      .filter(
-        (item): item is SelectInputOptionItem<NonNullable<T>> =>
-          item.type === 'option' && item.value != null,
-      );
-
-    const exactMatch = flatOptions.find(
-      (option) =>
-        String(option.value) === autocompleteValue ||
-        option.filterMatchers?.some((matcher) => matcher === autocompleteValue),
-    );
-
-    if (exactMatch) {
-      return exactMatch.value;
-    }
-
-    const fuzzyMatch = flatOptions.find((option) =>
-      option.filterMatchers?.some((matcher) =>
-        matcher.toLowerCase().includes(autocompleteValue.toLowerCase()),
-      ),
-    );
-
-    return fuzzyMatch ? fuzzyMatch.value : null;
-  };
-
   return (
     <ListboxBase.Options
       as={SelectInputOptionsContainer}
@@ -747,8 +684,6 @@ function SelectInputOptions<T = string>({
           <SearchInput
             ref={searchInputRef}
             id={id}
-            name={name}
-            autoComplete={autocomplete}
             role="combobox"
             shape="rectangle"
             placeholder={filterPlaceholder}
@@ -768,26 +703,8 @@ function SelectInputOptions<T = string>({
             onChange={(event) => {
               // Free up resources and ensure not to go out of bounds when the
               // resulting item count is less than before
-              const inputValue = event.currentTarget.value;
-
-              // Free up resources and ensure not to go out of bounds
               setMountedIndexes([]);
-              onFilterChange(inputValue);
-            }}
-            onInput={(event) => {
-              const inputValue = event.currentTarget.value;
-              const inputElement = event.currentTarget;
-
-              if (autocomplete && onAutocompleteSelect && inputValue) {
-                setTimeout(() => {
-                  if (inputElement.value === inputValue && inputValue.length > 2) {
-                    const matchedValue = findMatchingItem(inputValue);
-                    if (matchedValue !== null) {
-                      onAutocompleteSelect(matchedValue);
-                    }
-                  }
-                }, 50);
-              }
+              onFilterChange(event.currentTarget.value);
             }}
           />
         </div>