Combobox: input value reflects option label change (#1304)

Author: mdodgelooker

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- `Select` display value now properly updates when the option label for the current value changes
 - `InputChips` and `SelectMulti` overflow when a fixed height is used
 - `InputChips` and `SelectMulti` long values breaking out of the input
 - `InputSearch`, `Select`, `InputChips` and `SelectMulti` x button not clickable with `autoResize` and a max-width reached

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

@@ -34,6 +34,7 @@ import {
   TypographyProps,
   SpaceProps,
 } from '@looker/design-tokens'
+import isMatch from 'lodash/isMatch'
 import React, { forwardRef, Ref } from 'react'
 import styled from 'styled-components'
 import { useID } from '../../../utils'
@@ -122,7 +123,7 @@ export const ComboboxInternal = forwardRef(
     })
     const { lastActionType, option } = data
 
-    if (value !== undefined && (!option || option.value !== value.value)) {
+    if (value !== undefined && (!option || !isMatch(option, value))) {
       transition &&
         transition(ComboboxActionType.SELECT_SILENT, {
           option: value,

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

@@ -24,10 +24,14 @@
 
  */
 
-import { renderWithTheme } from '@looker/components-test-utils'
+import {
+  getAllComboboxOptionText,
+  renderWithTheme,
+} from '@looker/components-test-utils'
 import { cleanup, fireEvent, screen } from '@testing-library/react'
 import React, { useState } from 'react'
 
+import { Button } from '../../../Button'
 import { ComboboxOptionIndicatorFunction } from '../Combobox'
 import { Select } from './Select'
 import { SelectMulti } from './SelectMulti'
@@ -628,4 +632,48 @@ describe('Select', () => {
     // should default to first option
     expect(input).toHaveValue('Foo')
   })
+
+  test('displayed value changes when option label changes', () => {
+    const Component = () => {
+      const [label, setLabel] = useState('Original Label')
+      const options = [
+        { label, value: 'value_stays_the_same' },
+        { label: 'Another Option', value: 'other' },
+      ]
+      return (
+        <>
+          <Button onClick={() => setLabel('Updated label')}>
+            Update label
+          </Button>
+          <Select value="value_stays_the_same" options={options} />
+        </>
+      )
+    }
+    renderWithTheme(<Component />)
+
+    const input = screen.getByDisplayValue('Original Label')
+    fireEvent.click(input)
+    expect(getAllComboboxOptionText()).toMatchInlineSnapshot(`
+      Array [
+        "Original Label",
+        "Another Option",
+      ]
+    `)
+    // Close list
+    fireEvent.click(document)
+
+    fireEvent.click(screen.getByText('Update label'))
+    expect(input).toHaveDisplayValue('Updated label')
+
+    fireEvent.click(input)
+    expect(getAllComboboxOptionText()).toMatchInlineSnapshot(`
+      Array [
+        "Updated label",
+        "Another Option",
+      ]
+    `)
+
+    // Close popover to silence act() warning
+    fireEvent.click(document)
+  })
 })

storybook/src/Forms/Select.stories.tsx

@@ -43,9 +43,11 @@ import {
   ComboboxOptionObject,
   SelectOptionProps,
   SelectOptionGroupProps,
+  Space,
   SpaceVertical,
   Text,
   Flex,
+  useToggle,
 } from '@looker/components'
 import { options1k } from './options1k'
 
@@ -59,6 +61,7 @@ export const All = () => (
     <Inline />
     <InlineError />
     <SelectDemo />
+    <UpdateOptions />
   </Fieldset>
 )
 
@@ -363,3 +366,22 @@ export const SelectDemo = () => {
     </>
   )
 }
+
+export const UpdateOptions = () => {
+  const [value, setValue] = useState('second')
+  const { value: isPlural, toggle } = useToggle()
+  const s = isPlural ? 's' : ''
+  const options = useMemo(
+    () => [
+      { label: `Second${s}`, value: 'second' },
+      { label: `Hour${s}`, value: 'hour' },
+    ],
+    [s]
+  )
+  return (
+    <Space>
+      <Button onClick={toggle}>Use {isPlural ? 'singular' : 'plural'}</Button>
+      <Select autoResize options={options} value={value} onChange={setValue} />
+    </Space>
+  )
+}