@transferwise/components 46.1.0 → 46.2.0

package/src/inputs/SelectInput.css

@@ -1 +1,374 @@
-.np-bottom-sheet-v2-container{position:relative;z-index:1060}.np-bottom-sheet-v2-backdrop-container--enter,.np-bottom-sheet-v2-backdrop-container--leave{transition-duration:.3s;transition-property:opacity;transition-timing-function:ease-out}.np-bottom-sheet-v2-backdrop-container--enter-from,.np-bottom-sheet-v2-backdrop-container--leave-to{opacity:0}.np-bottom-sheet-v2-backdrop{background-color:#37517e;background-color:var(--color-content-primary);inset:0;opacity:.4;position:fixed}.np-bottom-sheet-v2{display:flex;flex-direction:column;inset:0;justify-content:flex-end;padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8);padding-top:64px;padding-top:var(--size-64);position:fixed}.np-bottom-sheet-v2-content{max-height:100%}.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-property:opacity}}@media (prefers-reduced-motion:no-preference){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{opacity:0}}.np-bottom-sheet-v2-content-inner-container{background-color:#fff;background-color:var(--color-background-elevated);border-top-left-radius:32px;border-top-right-radius:32px;box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;height:100%}.np-bottom-sheet-v2-content-inner-container:focus{outline:none}.np-bottom-sheet-v2-header{align-self:flex-end;padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-content-inner{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;padding-top:0;row-gap:8px;row-gap:var(--size-8)}.np-bottom-sheet-v2-content-inner--has-title{grid-template-rows:auto 1fr}.np-bottom-sheet-v2-content-inner--padding-md{padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-title{color:#37517e;color:var(--color-content-primary)}.np-bottom-sheet-v2-body{color:#5d7079;color:var(--color-content-secondary)}.np-button-input{align-content:center;border-radius:10px;border-radius:var(--size-10);display:inline-grid;grid-auto-columns:minmax(0,1fr);text-align:start}.np-popover-v2-container{background-color:#fff;background-color:var(--color-background-elevated);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;max-height:var(--max-height);overflow:hidden;width:var(--width);z-index:1060}.np-popover-v2-container--size-md{min-width:20rem}.np-popover-v2-container--size-lg{min-width:24rem}.np-popover-v2-container:focus{outline:none}.np-popover-v2{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;row-gap:8px;row-gap:var(--size-8)}.np-popover-v2--has-title{grid-template-rows:auto 1fr}.np-popover-v2--padding-md{padding:16px;padding:var(--size-16)}.np-popover-v2-title{color:#37517e;color:var(--color-content-primary)}.np-popover-v2-content{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-options-status{align-items:center;-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:8px 24px 0;padding:var(--size-8) var(--size-24) 0}.np-select-input-options-status-icon{color:#768e9c;color:var(--color-content-tertiary);padding:0 4px;padding:0 var(--size-4)}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8)}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{--ring-outline-offset:calc(var(--ring-outline-width)*-1);border-radius:10px;border-radius:var(--radius-small);padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-listbox:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:var(--color-interactive-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);cursor:default;display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16);-webkit-user-select:none;-moz-user-select:none;user-select:none}.np-select-input-option-container--active{box-shadow:inset 0 0 0 1px #c9cbce;box-shadow:inset 0 0 0 1px var(--color-interactive-secondary)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--not-within-trigger{align-self:flex-start}.np-select-input-option-content-text{display:flex;flex:1;flex-direction:column;overflow:hidden}.np-select-input-option-content-text-primary{font:inherit}.np-select-input-option-content-text-secondary{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-option-content-text-within-trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-option-content-text-line-1>:not([hidden])~:not([hidden]){margin-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right:var(--size-8)}.np-select-input-footer{padding:4px 24px 16px;padding:var(--size-4) var(--size-24) var(--size-16)}.np-select-input-addon-container{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon-container,.np-select-input-addon-container>:not([hidden])~:not([hidden]){margin-inline-start:4px;margin-inline-start:var(--size-4)}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:24px;height:var(--size-24);justify-content:center;width:24px;width:var(--size-24)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.np-select-input-addon--interactive:hover{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-select-input-addon--interactive:focus{outline:none}.np-select-input-addon--interactive:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-select-input-addon-separator{border-inline-start:1px solid #0000001a;border-inline-start:1px solid var(--color-border-neutral);height:24px;height:var(--size-24)}
+.np-bottom-sheet-v2-container {
+  position: relative;
+  z-index: 1060;
+}
+.np-bottom-sheet-v2-backdrop-container--enter,
+.np-bottom-sheet-v2-backdrop-container--leave {
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+}
+.np-bottom-sheet-v2-backdrop-container--enter-from,
+.np-bottom-sheet-v2-backdrop-container--leave-to {
+  opacity: 0;
+}
+.np-bottom-sheet-v2-backdrop {
+  position: fixed;
+  inset: 0px;
+  background-color: #37517e;
+  background-color: var(--color-content-primary);
+  opacity: 0.4;
+}
+.np-bottom-sheet-v2 {
+  position: fixed;
+  inset: 0px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding-left: 8px;
+  padding-left: var(--size-8);
+  padding-right: 8px;
+  padding-right: var(--size-8);
+  padding-top: 64px;
+  padding-top: var(--size-64);
+}
+.np-bottom-sheet-v2-content {
+  max-height: 100%;
+}
+.np-bottom-sheet-v2-content--enter,
+.np-bottom-sheet-v2-content--leave {
+  transition-property: transform;
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+}
+@media (prefers-reduced-motion: reduce) {
+  .np-bottom-sheet-v2-content--enter,
+  .np-bottom-sheet-v2-content--leave {
+    transition-property: opacity;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .np-bottom-sheet-v2-content--enter-from,
+  .np-bottom-sheet-v2-content--leave-to {
+    transform: translateY(100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .np-bottom-sheet-v2-content--enter-from,
+  .np-bottom-sheet-v2-content--leave-to {
+    opacity: 0;
+  }
+}
+.np-bottom-sheet-v2-content-inner-container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  border-top-left-radius: 32px;
+  /* TODO: Tokenize */
+  border-top-right-radius: 32px;
+  /* TODO: Tokenize */
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
+  box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
+}
+.np-bottom-sheet-v2-content-inner-container:focus {
+  outline: none;
+}
+.np-bottom-sheet-v2-header {
+  align-self: flex-end;
+  padding: 16px;
+  padding: var(--size-16);
+}
+.np-bottom-sheet-v2-content-inner {
+  padding-top: 0px;
+  display: grid;
+  grid-row-gap: 8px;
+  grid-row-gap: var(--size-8);
+  row-gap: 8px;
+  row-gap: var(--size-8);
+  overflow-y: auto;
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+}
+.np-bottom-sheet-v2-content-inner--has-title {
+  grid-template-rows: auto 1fr;
+}
+.np-bottom-sheet-v2-content-inner--padding-md {
+  padding: 16px;
+  padding: var(--size-16);
+}
+.np-bottom-sheet-v2-title {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-bottom-sheet-v2-body {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.np-button-input {
+  display: inline-grid;
+  grid-auto-columns: minmax(0, 1fr);
+  align-content: center;
+  border-radius: 10px;
+  border-radius: var(--size-10);
+  text-align: start;
+}
+.np-popover-v2-container {
+  z-index: 1060;
+  display: flex;
+  max-height: var(--max-height);
+  width: var(--width);
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
+  box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
+}
+.np-popover-v2-container--size-md {
+  min-width: 20rem;
+}
+.np-popover-v2-container--size-lg {
+  min-width: 24rem;
+}
+.np-popover-v2-container:focus {
+  outline: none;
+}
+.np-popover-v2 {
+  display: grid;
+  grid-row-gap: 8px;
+  grid-row-gap: var(--size-8);
+  row-gap: 8px;
+  row-gap: var(--size-8);
+  overflow-y: auto;
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+}
+.np-popover-v2--has-title {
+  grid-template-rows: auto 1fr;
+}
+.np-popover-v2--padding-md {
+  padding: 16px;
+  padding: var(--size-16);
+}
+.np-popover-v2-title {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-popover-v2-content {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.np-select-input-placeholder {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.np-select-input-options-container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+.np-select-input-options-container:focus {
+  outline: none;
+}
+@media (min-width: 576px) {
+  .np-select-input-options-container {
+    max-height: 28rem /* 448px */;
+  }
+}
+.np-select-input-options-status {
+  display: flex;
+  align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+  -moz-column-gap: var(--size-8);
+       column-gap: var(--size-8);
+  padding: 8px 24px 0px;
+  padding: var(--size-8) var(--size-24) 0px;
+}
+.np-select-input-options-status-icon {
+  padding: 0 4px;
+  padding: 0 var(--size-4);
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.np-select-input-query-container {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  padding: var(--size-8);
+}
+.np-select-input-listbox-container {
+  position: relative;
+  height: var(--initial-height);
+  scroll-padding-top: 8px;
+  scroll-padding-top: var(--size-8);
+  scroll-padding-bottom: 8px;
+  scroll-padding-bottom: var(--size-8);
+  overflow-y: auto;
+}
+@media (min-width: 576px) {
+  .np-select-input-listbox-container {
+    height: auto;
+  }
+}
+.np-select-input-listbox-container--has-group {
+  scroll-padding-top: 32px;
+  scroll-padding-top: var(--size-32);
+}
+.np-select-input-listbox {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  padding: 8px;
+  padding: var(--size-8);
+  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
+}
+.np-select-input-listbox:focus {
+  outline: none;
+}
+.np-select-input-listbox:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.np-select-input-separator-item {
+  margin: 8px;
+  margin: var(--size-8);
+  border-top-width: 1px;
+}
+.np-select-input-group-item--without-needle:first-child {
+  margin-top: calc(-1 * 8px);
+  margin-top: calc(-1 * var(--size-8));
+}
+.np-select-input-group-item-header {
+  position: sticky;
+  top: 0px;
+  z-index: 10;
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
+  padding: 8px 16px 4px;
+  padding: var(--size-8) var(--size-16) var(--size-4);
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.np-select-input-option-container {
+  display: flex;
+  cursor: default;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+  -moz-column-gap: var(--size-8);
+       column-gap: var(--size-8);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  padding: 12px 16px;
+  padding: var(--size-12) var(--size-16);
+  color: var(--color-interactive-primary);
+}
+.np-select-input-option-container--active {
+  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
+}
+.np-select-input-option-container--disabled {
+  opacity: 0.45;
+}
+.np-select-input-option-check--not-selected {
+  visibility: hidden;
+}
+.np-select-input-option {
+  flex: 1;
+}
+.np-select-input-option-content-container {
+  display: flex;
+  align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+  -moz-column-gap: var(--size-8);
+       column-gap: var(--size-8);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-select-input-option-content-icon {
+  display: flex;
+}
+.np-select-input-option-content-icon--not-within-trigger {
+  align-self: flex-start;
+}
+.np-select-input-option-content-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+.np-select-input-option-content-text-primary {
+  font: inherit;
+}
+.np-select-input-option-content-text-secondary {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.np-select-input-option-content-text-within-trigger {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.np-select-input-option-content-text-line-1 > :not([hidden]) ~ :not([hidden]) {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-left: 8px;
+  margin-left: var(--size-8);
+}
+.np-select-input-footer {
+  padding: 4px 24px 16px;
+  padding: var(--size-4) var(--size-24) var(--size-16);
+}
+.np-select-input-addon-container {
+  pointer-events: none;
+  margin-inline-start: 4px;
+  margin-inline-start: var(--size-4);
+  display: inline-flex;
+  align-items: center;
+}
+.np-select-input-addon-container > :not([hidden]) ~ :not([hidden]) {
+  margin-inline-start: 4px;
+  margin-inline-start: var(--size-4);
+}
+.np-select-input-addon {
+  border-width: 0;
+  background: none;
+  display: inline-flex;
+  height: 24px;
+  height: var(--size-24);
+  width: 24px;
+  width: var(--size-24);
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.125rem /* 2px */;
+  /* TODO: Tokenize */
+}
+.np-select-input-addon--interactive {
+  pointer-events: auto;
+  color: #c9cbce;
+  color: var(--color-interactive-secondary);
+}
+.np-select-input-addon--interactive:hover {
+  color: #b5b7ba;
+  color: var(--color-interactive-secondary-hover);
+}
+.np-select-input-addon--interactive:focus {
+  outline: none;
+}
+.np-select-input-addon--interactive:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.np-select-input-addon-separator {
+  height: 24px;
+  height: var(--size-24);
+  border-inline-start: 1px solid rgba(0,0,0,0.10196);
+  border-inline-start: 1px solid var(--color-border-neutral);
+}

package/src/inputs/SelectInput.spec.tsx

@@ -1,4 +1,4 @@
-import { act, screen, within } from '@testing-library/react';
+import { act, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
@@ -30,7 +30,7 @@ describe('SelectInput', () => {
           { type: 'option', value: 'USD' },
           { type: 'option', value: 'EUR' },
         ]}
-        renderFooter={({ normalizedQuery }) =>
+        renderFooter={({ queryNormalized: normalizedQuery }) =>
           normalizedQuery != null ? (
             <>Showing results for ‘{normalizedQuery}’</>
           ) : (
@@ -129,8 +129,57 @@ describe('SelectInput', () => {
     expect(within(listbox).getByRole('option')).toBeInTheDocument();
 
     const option = within(listbox).getAllByRole('option')[0];
-    userEvent.click(option);
+    // eslint-disable-next-line @typescript-eslint/require-await
+    await act(async () => {
+      userEvent.click(option);
+    });
 
     expect(trigger).toHaveTextContent('EUR');
   });
+
+  it('clears filter query on close', async () => {
+    const handleFilterChange = jest.fn();
+
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'USD' },
+          { type: 'option', value: 'EUR' },
+        ]}
+        filterable
+        onFilterChange={handleFilterChange}
+      />,
+    );
+
+    const trigger = screen.getAllByRole('button')[0];
+    // eslint-disable-next-line @typescript-eslint/require-await
+    await act(async () => {
+      userEvent.tab();
+      userEvent.keyboard(' ');
+    });
+
+    expect(handleFilterChange).not.toHaveBeenCalled();
+
+    userEvent.keyboard(' x');
+    expect(handleFilterChange).toHaveBeenLastCalledWith({
+      query: ' x',
+      queryNormalized: 'x',
+    });
+
+    userEvent.keyboard('{Escape}');
+    await waitFor(() => {
+      expect(handleFilterChange).toHaveBeenLastCalledWith({
+        query: '',
+        queryNormalized: null,
+      });
+    });
+
+    // eslint-disable-next-line @typescript-eslint/require-await
+    await act(async () => {
+      userEvent.click(trigger);
+    });
+
+    const listbox = screen.getByRole('listbox');
+    expect(within(listbox).getAllByRole('option')).toHaveLength(2);
+  });
 });

package/src/inputs/SelectInput.story.tsx

@@ -266,7 +266,7 @@ export const Currencies: StoryObj<{
             icon={<Flag code={currency.code} intrinsicSize={24} />}
           />
         )}
-        renderFooter={({ resultsEmpty, normalizedQuery }) =>
+        renderFooter={({ resultsEmpty, queryNormalized: normalizedQuery }) =>
           resultsEmpty && normalizedQuery != null && /^[a-z]{3}$/u.test(normalizedQuery) ? (
             <>
               It’s not possible use {normalizedQuery.toUpperCase()} yet.{' '}

package/src/inputs/SelectInput.tsx

@@ -138,7 +138,7 @@ export interface SelectInputProps<T = string> {
   renderValue?: (value: NonNullable<T>, withinTrigger: boolean) => React.ReactNode;
   renderFooter?: (args: {
     resultsEmpty: boolean;
-    normalizedQuery: string | null | undefined;
+    queryNormalized: string | null | undefined;
   }) => React.ReactNode;
   renderTrigger?: (args: {
     content: React.ReactNode;
@@ -153,8 +153,8 @@ export interface SelectInputProps<T = string> {
   disabled?: boolean;
   size?: 'md' | 'lg';
   className?: string;
+  onFilterChange?: (args: { query: string; queryNormalized: string | null }) => void;
   onChange?: (value: T) => void;
-  onSearchChange?: (query: string) => void;
   onClear?: () => void;
 }
 
@@ -209,6 +209,8 @@ function SelectInputClearButton({ className, onClick }: SelectInputClearButtonPr
   );
 }
 
+const noop = () => {};
+
 export function SelectInput<T = string>({
   name,
   placeholder,
@@ -224,12 +226,21 @@ export function SelectInput<T = string>({
   disabled,
   size = 'md',
   className,
+  onFilterChange = noop,
   onChange,
-  onSearchChange,
   onClear,
 }: SelectInputProps<T>) {
   const [open, setOpen] = useState(false);
 
+  const [filterQuery, _setFilterQuery] = useState('');
+  const setFilterQuery = useEffectEvent((query: string) => {
+    _setFilterQuery(query);
+    onFilterChange({
+      query,
+      queryNormalized: query ? searchableString(query) : null,
+    });
+  });
+
   const triggerRef = useRef<HTMLButtonElement>(null);
 
   const screenSm = useScreenSize(Breakpoint.SMALL);
@@ -311,6 +322,11 @@ export function SelectInput<T = string>({
           onClose={() => {
             setOpen(false);
           }}
+          onCloseEnd={() => {
+            if (filterQuery !== '') {
+              setFilterQuery('');
+            }
+          }}
         >
           <SelectInputOptions
             items={items}
@@ -320,7 +336,8 @@ export function SelectInput<T = string>({
             filterPlaceholder={filterPlaceholder}
             searchInputRef={searchInputRef}
             listboxRef={listboxRef}
-            onSearchChange={onSearchChange}
+            filterQuery={filterQuery}
+            onFilterChange={setFilterQuery}
           />
         </OptionsOverlay>
       )}
@@ -407,7 +424,8 @@ interface SelectInputOptionsProps<T = string>
   > {
   searchInputRef: React.RefObject<HTMLInputElement>;
   listboxRef: React.RefObject<HTMLDivElement>;
-  onSearchChange?: (query: string) => void;
+  filterQuery: string;
+  onFilterChange: (query: string) => void;
 }
 
 function SelectInputOptions<T = string>({
@@ -418,19 +436,19 @@ function SelectInputOptions<T = string>({
   filterPlaceholder,
   searchInputRef,
   listboxRef,
-  onSearchChange,
+  filterQuery,
+  onFilterChange,
 }: SelectInputOptionsProps<T>) {
   const intl = useIntl();
 
   const controllerRef = filterable ? searchInputRef : listboxRef;
 
-  const [query, setQuery] = useState('');
   const needle = useMemo(() => {
     if (filterable) {
-      return query ? searchableString(query) : null;
+      return filterQuery ? searchableString(filterQuery) : null;
     }
     return undefined;
-  }, [filterable, query]);
+  }, [filterQuery, filterable]);
   const resultsEmpty = needle != null && filterSelectInputItems(items, needle).length === 0;
 
   const listboxContainerRef = useRef<HTMLDivElement>(null);
@@ -468,7 +486,7 @@ function SelectInputOptions<T = string>({
             ref={searchInputRef}
             shape="rectangle"
             placeholder={filterPlaceholder}
-            value={query}
+            value={filterQuery}
             aria-controls={listboxId}
             aria-describedby={showStatus ? statusId : undefined}
             onKeyDown={(event) => {
@@ -479,10 +497,7 @@ function SelectInputOptions<T = string>({
               }
             }}
             onChange={(event) => {
-              setQuery(event.currentTarget.value);
-              if (onSearchChange) {
-                onSearchChange(event.currentTarget.value);
-              }
+              onFilterChange(event.currentTarget.value);
             }}
           />
         </div>
@@ -535,7 +550,7 @@ function SelectInputOptions<T = string>({
             >
               {renderFooter({
                 resultsEmpty,
-                normalizedQuery: needle,
+                queryNormalized: needle,
               })}
             </div>
           </footer>