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

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

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 () {