From 6b78b424694b344fd762d43fd53d005f3dfe4ab8 Mon Sep 17 00:00:00 2001
From: l-obrien-overleaf <l.obrien@digital-science.com>
Date: Mon, 27 Apr 2026 13:03:55 +0100
Subject: [PATCH] visual updates to optional fields in manual bib entry
 (#33102)

* visual updates to optional fields in manual bib entry

* omitting onClose from button auto complete props

GitOrigin-RevId: 922695e8eaec83702b482123dc4b4483fe957b78
---
 .../shared/components/ol/ol-autocomplete.tsx  |  7 +++++++
 .../shared/ol-autocomplete.spec.tsx           | 21 +++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/services/web/frontend/js/shared/components/ol/ol-autocomplete.tsx b/services/web/frontend/js/shared/components/ol/ol-autocomplete.tsx
index 9c057874bd..146ac049d3 100644
--- a/services/web/frontend/js/shared/components/ol/ol-autocomplete.tsx
+++ b/services/web/frontend/js/shared/components/ol/ol-autocomplete.tsx
@@ -32,6 +32,7 @@ export type OLAutocompleteProps = {
   useFuzzySearch?: boolean
   inputRef?: React.ForwardedRef<HTMLInputElement>
   expandUp?: boolean
+  onClose?: () => void
 }
 
 type OLAutocompleteDisplayItem =
@@ -57,6 +58,7 @@ function OLAutocompleteInternal({
   useFuzzySearch = false,
   inputRef,
   expandUp = false,
+  onClose,
 }: OLAutocompleteProps) {
   const { t } = useTranslation()
 
@@ -178,6 +180,11 @@ function OLAutocompleteInternal({
     onInputValueChange: ({ inputValue = '' }) => {
       setInternalInputValue(inputValue)
     },
+    onIsOpenChange: ({ isOpen }) => {
+      if (!isOpen) {
+        onClose?.()
+      }
+    },
   })
 
   const shouldShowDropdown = isOpen && displayItems.length > 0
diff --git a/services/web/test/frontend/components/shared/ol-autocomplete.spec.tsx b/services/web/test/frontend/components/shared/ol-autocomplete.spec.tsx
index 4559fb99f3..35c82cb202 100644
--- a/services/web/test/frontend/components/shared/ol-autocomplete.spec.tsx
+++ b/services/web/test/frontend/components/shared/ol-autocomplete.spec.tsx
@@ -59,6 +59,7 @@ function render(props: RenderProps) {
           createOptionPrefix={props.createOptionPrefix}
           useFuzzySearch={props.useFuzzySearch}
           expandUp={props.expandUp}
+          onClose={props.onClose}
         />
         <button type="submit">submit</button>
       </form>
@@ -255,6 +256,26 @@ describe('<OLAutocomplete />', function () {
 
       cy.findByLabelText('Delete').should('not.exist')
     })
+
+    it('calls onClose when an item is selected', function () {
+      const closeHandler = cy.stub().as('closeHandler')
+      render({ items: testItems, onClose: closeHandler })
+
+      cy.findByRole('combobox').click()
+      cy.findByText('Banana').click()
+
+      cy.get('@closeHandler').should('have.been.calledOnce')
+    })
+
+    it('calls onClose when Escape is pressed', function () {
+      const closeHandler = cy.stub().as('closeHandler')
+      render({ items: testItems, onClose: closeHandler })
+
+      cy.findByRole('combobox').click()
+      cy.findByRole('combobox').type('{esc}')
+
+      cy.get('@closeHandler').should('have.been.calledOnce')
+    })
   })
 
   describe('clear button', function () {