From 4bc5a0f1d97ab304923b16d1d01a199868e4b658 Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Thu, 24 Oct 2024 12:59:49 +0300
Subject: [PATCH] Merge pull request #21319 from
 overleaf/mj-select-controlled-null

[web] Allow Select to be controlled with no selection

GitOrigin-RevId: 15e5b643e30205124f8e807379ab7e540e2145d1
---
 services/web/frontend/js/shared/components/select.tsx     | 4 ++--
 .../web/test/frontend/components/shared/select.spec.tsx   | 8 ++++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/services/web/frontend/js/shared/components/select.tsx b/services/web/frontend/js/shared/components/select.tsx
index addb605194..bad73d19ce 100644
--- a/services/web/frontend/js/shared/components/select.tsx
+++ b/services/web/frontend/js/shared/components/select.tsx
@@ -33,7 +33,7 @@ export type SelectProps<T> = {
   defaultText?: string
   // Initial selected item, displayed in the initial render. When both `defaultText`
   // and `defaultItem` are set the latter is ignored.
-  defaultItem?: T
+  defaultItem?: T | null
   // Stringifies an item. The resulting string is rendered as a subtitle in a dropdown option.
   itemToSubtitle?: (item: T | null | undefined) => string
   // Stringifies an item. The resulting string is rendered as a React `key` for each item.
@@ -41,7 +41,7 @@ export type SelectProps<T> = {
   // Callback invoked after the selected item is updated.
   onSelectedItemChanged?: (item: T | null | undefined) => void
   // Optionally directly control the selected item.
-  selected?: T
+  selected?: T | null
   // When `true` item selection is disabled.
   disabled?: boolean
   // Determine which items should be disabled
diff --git a/services/web/test/frontend/components/shared/select.spec.tsx b/services/web/test/frontend/components/shared/select.spec.tsx
index 9d95441aea..361679a73a 100644
--- a/services/web/test/frontend/components/shared/select.spec.tsx
+++ b/services/web/test/frontend/components/shared/select.spec.tsx
@@ -329,5 +329,13 @@ describe('<Select />', function () {
       })
       cy.findByText('Demo item 2').should('exist')
     })
+
+    it('should show default text when selected is null', function () {
+      render({
+        selected: null,
+        defaultText: 'Choose an item',
+      })
+      cy.findByText('Choose an item').should('exist')
+    })
   })
 })