Fix ComboboxOption highlighting current value (#692)

Author: mdodgelooker

packages/components/src/Form/Inputs/Combobox/Combobox.test.tsx

@@ -143,6 +143,27 @@ describe('<Combobox/> with children', () => {
     )
   })
 
+  test('Does not highlight current selected value', () => {
+    const { getByText, getByPlaceholderText } = renderWithTheme(
+      <Combobox key="combobox" value={{ label: 'Foo', value: '101' }}>
+        <ComboboxInput placeholder="Type here" />
+        <ComboboxList>
+          <ComboboxOption label="Foo" value="101" />
+          <ComboboxOption label="FooBar" value="102" />
+        </ComboboxList>
+      </Combobox>
+    )
+
+    const input = getByPlaceholderText('Type here')
+    fireEvent.click(input)
+    expect(getByText('Foo')).not.toHaveStyle(
+      'font-weight: 600; text-decoration: underline'
+    )
+    expect(getByText('FooBar')).not.toHaveStyle(
+      'font-weight: 600; text-decoration: underline'
+    )
+  })
+
   test.each([
     [
       'Combobox',

packages/components/src/Form/Inputs/Combobox/ComboboxOption.tsx

@@ -57,7 +57,7 @@ import { getComboboxText } from './utils/getComboboxText'
 import { useOptionEvents } from './utils/useOptionEvents'
 import { useOptionStatus } from './utils/useOptionStatus'
 import { useAddOptionToContext } from './utils/useAddOptionToContext'
-import { ComboboxData, ComboboxMultiData } from './utils/state'
+import { ComboboxData } from './utils/state'
 
 export interface ComboboxOptionObject {
   /**
@@ -217,10 +217,6 @@ export function ComboboxOptionTextInternal({
   const { data } = contextToUse
   const { inputValue } = data
   const contextOption = (data as ComboboxData).option
-  const options = contextOption
-    ? [contextOption]
-    : (data as ComboboxMultiData).options
-  const optionTexts = options ? options.map(opt => getComboboxText(opt)) : []
 
   const option = useContext(OptionContext)
   const text = getComboboxText(option)
@@ -229,9 +225,9 @@ export function ComboboxOptionTextInternal({
     !highlightText ||
     !inputValue ||
     inputValue === '' ||
-    // inputValue is reflecting a currently selected option
+    // inputValue is reflecting the currently selected option
     // highlighting it would be weird
-    (text === inputValue && optionTexts.includes(text))
+    inputValue === getComboboxText(contextOption)
   ) {
     return <span {...props}>{text}</span>
   }

packages/playground/src/index.tsx

@@ -24,13 +24,13 @@ import { GlobalStyle } from '@looker/components'
 import { theme } from '@looker/design-tokens'
 import { ThemeProvider } from 'styled-components'
 
-import { MenuDemo } from './Menu/MenuDemo'
+import { ComboboxDemo } from './Select/ComboboxDemo'
 
 const App: React.FC = () => {
   return (
     <ThemeProvider theme={theme}>
       <GlobalStyle />
-      <MenuDemo />
+      <ComboboxDemo />
     </ThemeProvider>
   )
 }