Merge pull request #35964 from overleaf/dp-dark-library-autocomplete

Add dark theme support to the library auto-complete dropdown

GitOrigin-RevId: be975d7c379e689ed61706bf027e488b7177eb73

services/web/frontend/js/shared/components/ol/ol-autocomplete.tsx

@@ -216,7 +216,9 @@ function OLAutocompleteInternal({
             'dropdown-item-highlighted': highlightedIndex === index,
           })}
         >
-          <span className="text-muted">{createOptionPrefix} </span>
+          <span className="ol-autocomplete-create-prefix">
+            {createOptionPrefix}{' '}
+          </span>
           <strong>'{internalInputValue}'</strong>
         </OLButton>
       </li>
@@ -245,6 +247,7 @@ function OLAutocompleteInternal({
           {...getInputProps({
             ref: inputRef,
           })}
+          type="text"
           placeholder={placeholder}
           disabled={disabled}
         />

services/web/frontend/stylesheets/components/autocomplete.scss

@@ -1,4 +1,9 @@
 .ol-autocomplete {
+  .form-label,
+  .ol-autocomplete-create-prefix {
+    color: var(--content-secondary-themed);
+  }
+
   .dropdown-menu {
     position: relative;
     top: 0;

services/web/test/frontend/components/shared/ol-autocomplete.spec.tsx

@@ -450,57 +450,7 @@ describe('<OLAutocomplete />', function () {
 
   describe('form integration', function () {
     it('works within a form context', function () {
-      const FormWithAutocomplete = ({
-        onSubmit,
-      }: {
-        onSubmit: (formData: object) => void
-      }) => {
-        const changeHandler = cy.stub().as('formChangeHandler')
-
-        function handleSubmit(event: FormEvent<HTMLFormElement>) {
-          event.preventDefault()
-          const formData = new FormData(event.target as HTMLFormElement)
-          onSubmit(Object.fromEntries(formData.entries()))
-        }
-
-        return (
-          <OLForm onSubmit={handleSubmit}>
-            <input
-              type="hidden"
-              name="autocomplete_value"
-              value=""
-              ref={ref => {
-                if (ref) {
-                  // Update hidden input when autocomplete changes
-                  const observer = new MutationObserver(() => {
-                    const autocompleteInput = ref.form?.querySelector(
-                      'input[type="text"]'
-                    ) as HTMLInputElement
-                    if (autocompleteInput) {
-                      ref.value = autocompleteInput.value
-                    }
-                  })
-                  if (ref.form) {
-                    observer.observe(ref.form, {
-                      subtree: true,
-                      attributes: true,
-                    })
-                  }
-                }
-              }}
-            />
-            <OLAutocomplete
-              items={testItems}
-              onChange={changeHandler}
-              placeholder="Search..."
-              label="Select item"
-            />
-            <OLButton type="submit">submit</OLButton>
-          </OLForm>
-        )
-      }
-
-      const submitHandler = cy.stub().as('submitHandler')
+      const changeHandler = cy.stub().as('formChangeHandler')
       cy.mount(
         <div
           style={{
@@ -510,7 +460,15 @@ describe('<OLAutocomplete />', function () {
             height: '100vh',
           }}
         >
-          <FormWithAutocomplete onSubmit={submitHandler} />
+          <OLForm>
+            <OLAutocomplete
+              items={testItems}
+              onChange={changeHandler}
+              placeholder="Search..."
+              label="Select item"
+            />
+            <OLButton type="submit">submit</OLButton>
+          </OLForm>
         </div>
       )