@instructure/ui-select 8.13.1-snapshot.25 → 8.13.1-snapshot.35

package/src/Select/index.tsx

@@ -23,10 +23,11 @@
  */
 
 /** @jsx jsx */
-import { Children, Component } from 'react'
+import React, { Children, Component } from 'react'
 
 import { createChainedFunction } from '@instructure/ui-utils'
 import { testable } from '@instructure/ui-testable'
+import { uid } from '@instructure/uid'
 import {
   matchComponentTypes,
   omitProps,
@@ -46,7 +47,17 @@ import {
   IconArrowOpenDownLine,
   IconArrowOpenUpLine
 } from '@instructure/ui-icons'
-import { uid } from '@instructure/uid'
+
+import type { ViewProps } from '@instructure/ui-view'
+import type { TextInputProps } from '@instructure/ui-text-input'
+import type {
+  OptionsItemProps,
+  OptionsSeparatorProps
+} from '@instructure/ui-options'
+import type {
+  SelectableProps,
+  SelectableRender
+} from '@instructure/ui-selectable'
 
 import { withStyle, jsx } from '@instructure/emotion'
 
@@ -55,6 +66,9 @@ import generateComponentTheme from './theme'
 
 import { Group } from './Group'
 import { Option } from './Option'
+
+import type { RenderSelectOptionLabel } from './Option/props'
+
 import type { SelectProps } from './props'
 import { allowedProps, propTypes } from './props'
 
@@ -63,6 +77,7 @@ import { allowedProps, propTypes } from './props'
 category: components
 tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
@@ -76,7 +91,6 @@ class Select extends Component<SelectProps> {
     inputValue: '',
     isShowingOptions: false,
     size: 'medium',
-    placeholder: null,
     // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
     interaction: undefined,
     isRequired: false,
@@ -84,33 +98,12 @@ class Select extends Component<SelectProps> {
     visibleOptionsCount: 8,
     placement: 'bottom stretch',
     constrain: 'window',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onFocus: (event) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onBlur: (event) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onRequestShowOptions: (event) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onRequestHideOptions: (event) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onRequestHighlightOption: (event, data) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onRequestSelectOption: (event, data) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'node' is declared but its value is never read.
-    inputRef: (node) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'node' is declared but its value is never read.
-    listRef: (node) => {},
-    renderBeforeInput: null,
-    renderAfterInput: null,
-    children: null,
     shouldNotWrap: false
   }
 
   static Option = Option
   static Group = Group
 
-  ref: Element | null = null
-
   componentDidMount() {
     this.props.makeStyles?.()
   }
@@ -126,19 +119,20 @@ class Select extends Component<SelectProps> {
     hasInputRef: false
   }
 
-  _defaultId = uid('Select')
-  _assistId = uid('Select-assistiveText')
-  _inputContainer = undefined
-  _list = null
+  ref: HTMLInputElement | null = null
+
+  private _defaultId = uid('Select')
+  private _inputContainer: HTMLSpanElement | null = null
+  private _listView: Element | null = null
   // temporarily stores actionable options
-  _optionIds = []
+  private _optionIds: string[] = []
   // best guess for first calculation of list height
-  _optionHeight = 36
+  private _optionHeight = 36
 
   focus() {
-    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
     this.ref && this.ref.focus()
   }
+
   get _input() {
     console.warn(
       '_input property is deprecated and will be removed in v9, please use ref instead'
@@ -156,34 +150,31 @@ class Select extends Component<SelectProps> {
   }
 
   get width() {
-    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-    return this._inputContainer && this._inputContainer.offsetWidth
+    return this._inputContainer ? this._inputContainer.offsetWidth : undefined
   }
 
   get interaction() {
     return getInteraction({ props: this.props })
   }
 
-  get highlightedOptionId() {
-    let highlightedOptionId = null
+  get highlightedOptionId(): string | undefined {
+    let highlightedOptionId: string | undefined
+
     Children.toArray(this.props.children).forEach((child) => {
       if (matchComponentTypes(child, [Group])) {
         // group found
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
-        Children.toArray(child.props.children).forEach((option) => {
+        ;(
+          Children.toArray((child as Group).props.children) as Option[]
+        ).forEach((option) => {
           // check options in group
-          // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
           if (option.props.isHighlighted) {
-            // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
             highlightedOptionId = option.props.id
           }
         })
       } else {
         // ungrouped option found
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
-        if (child.props.isHighlighted) {
-          // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
-          highlightedOptionId = child.props.id
+        if ((child as Option).props.isHighlighted) {
+          highlightedOptionId = (child as Option).props.id
         }
       }
     })
@@ -192,102 +183,89 @@ class Select extends Component<SelectProps> {
   }
 
   get selectedOptionId() {
-    // @ts-expect-error ts-migrate(7034) FIXME: Variable 'selectedOptionId' implicitly has type 'a... Remove this comment to see the full error message
-    const selectedOptionId = []
+    const selectedOptionId: string[] = []
+
     Children.toArray(this.props.children).forEach((child) => {
       if (matchComponentTypes(child, [Group])) {
         // group found
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
-        Children.toArray(child.props.children).forEach((option) => {
+        ;(
+          Children.toArray((child as Group).props.children) as Option[]
+        ).forEach((option) => {
           // check options in group
-          // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
           if (option.props.isSelected) {
-            // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
             selectedOptionId.push(option.props.id)
           }
         })
       } else {
         // ungrouped option found
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
-        if (child.props.isSelected) {
-          // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
-          selectedOptionId.push(child.props.id)
+        if ((child as Option).props.isSelected) {
+          selectedOptionId.push((child as Option).props.id)
         }
       }
     })
 
-    // @ts-expect-error ts-migrate(7005) FIXME: Variable 'selectedOptionId' implicitly has an 'any... Remove this comment to see the full error message
-    if (selectedOptionId.length === 1) return selectedOptionId[0]
-    if (selectedOptionId.length === 0) return null
-    // @ts-expect-error ts-migrate(7005) FIXME: Variable 'selectedOptionId' implicitly has an 'any... Remove this comment to see the full error message
+    if (selectedOptionId.length === 1) {
+      return selectedOptionId[0]
+    }
+    if (selectedOptionId.length === 0) {
+      return undefined
+    }
     return selectedOptionId
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'node' implicitly has an 'any' type.
-  handleInputRef = (node) => {
+  handleInputRef = (node: HTMLInputElement | null) => {
     // ensures list is positioned with respect to input if list is open on mount
     if (!this.state.hasInputRef) {
       this.setState({ hasInputRef: true })
     }
 
     this.ref = node
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.inputRef(node)
+    this.props.inputRef?.(node)
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'node' implicitly has an 'any' type.
-  handleListRef = (node) => {
-    this._list = node
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.listRef(node)
+  handleListRef = (node: HTMLUListElement | null) => {
+    this.props.listRef?.(node)
 
     // store option height to calculate list maxHeight
     if (node && node.querySelector('[role="option"]')) {
-      this._optionHeight = node.querySelector('[role="option"]').offsetHeight
+      this._optionHeight = (
+        node.querySelector('[role="option"]') as HTMLElement
+      ).offsetHeight
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'node' implicitly has an 'any' type.
-  handleInputContainerRef = (node) => {
+  handleInputContainerRef = (node: HTMLSpanElement | null) => {
     this._inputContainer = node
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'id' implicitly has an 'any' type.
-  scrollToOption(id) {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_listView' does not exist on type 'Selec... Remove this comment to see the full error message
+  scrollToOption(id?: string) {
     if (this._listView) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_listView' does not exist on type 'Selec... Remove this comment to see the full error message
       const option = this._listView.querySelector(`[id="${id}"]`)
       if (!option) return
 
       const listItem = option.parentNode
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_listView' does not exist on type 'Selec... Remove this comment to see the full error message
       const parentTop = getBoundingClientRect(this._listView).top
       const elemTop = getBoundingClientRect(listItem).top
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_listView' does not exist on type 'Selec... Remove this comment to see the full error message
       const parentBottom = parentTop + this._listView.clientHeight
-      const elemBottom = elemTop + listItem.clientHeight
+      const elemBottom =
+        elemTop + (listItem ? (listItem as Element).clientHeight : 0)
 
       if (elemBottom > parentBottom) {
-        // @ts-expect-error ts-migrate(2339) FIXME: Property '_listView' does not exist on type 'Selec... Remove this comment to see the full error message
         this._listView.scrollTop += elemBottom - parentBottom
       } else if (elemTop < parentTop) {
-        // @ts-expect-error ts-migrate(2339) FIXME: Property '_listView' does not exist on type 'Selec... Remove this comment to see the full error message
         this._listView.scrollTop -= parentTop - elemTop
       }
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  highlightOption(event, id) {
+  highlightOption(event: React.SyntheticEvent, id: string) {
     const { onRequestHighlightOption } = this.props
     if (id) {
-      // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-      onRequestHighlightOption(event, { id })
+      onRequestHighlightOption?.(event, { id })
     }
   }
 
-  getEventHandlers() {
+  getEventHandlers(): Partial<SelectableProps> {
     const {
       isShowingOptions,
       onRequestShowOptions,
@@ -300,28 +278,23 @@ class Select extends Component<SelectProps> {
 
     return this.interaction === 'enabled'
       ? {
-          // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
           onRequestShowOptions: (event) => {
-            // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-            onRequestShowOptions(event)
+            onRequestShowOptions?.(event)
             if (selectedOptionId && !Array.isArray(selectedOptionId)) {
               // highlight selected option on show
               this.highlightOption(event, selectedOptionId)
             }
           },
-          // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
           onRequestHideOptions: (event) => {
-            // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-            onRequestHideOptions(event)
+            onRequestHideOptions?.(event)
           },
           onRequestHighlightOption: (
-            event: Event,
+            event,
             { id, direction }: { id?: string; direction?: number }
           ) => {
             if (!isShowingOptions) return
             // if id exists, use that
-            // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'any' is not assignable to parame... Remove this comment to see the full error message
-            let highlightId = this._optionIds.indexOf(id) > -1 ? id : null
+            let highlightId = this._optionIds.indexOf(id!) > -1 ? id : undefined
             if (!highlightId) {
               if (!highlightedOptionId) {
                 // nothing highlighted yet, highlight first option
@@ -330,7 +303,7 @@ class Select extends Component<SelectProps> {
                 // find next id based on direction
                 const index = this._optionIds.indexOf(highlightedOptionId)
                 highlightId =
-                  index > -1 ? this._optionIds[index + direction!] : null
+                  index > -1 ? this._optionIds[index + direction!] : undefined
               }
             }
             if (highlightId) {
@@ -338,31 +311,29 @@ class Select extends Component<SelectProps> {
               this.highlightOption(event, highlightId)
             }
           },
-          // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
           onRequestHighlightFirstOption: (event) => {
             this.highlightOption(event, this._optionIds[0])
           },
-          // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
           onRequestHighlightLastOption: (event) => {
             this.highlightOption(
               event,
               this._optionIds[this._optionIds.length - 1]
             )
           },
-          onRequestSelectOption: (event: Event, { id }: { id?: string }) => {
-            // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'any' is not assignable to parame... Remove this comment to see the full error message
+          onRequestSelectOption: (event, { id }) => {
             if (id && this._optionIds.indexOf(id) !== -1) {
               // only select if id exists as a valid option
-              // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-              onRequestSelectOption(event, { id })
+              onRequestSelectOption?.(event, { id })
             }
           }
         }
       : {}
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'option' implicitly has an 'any' type.
-  renderOption(option, data) {
+  renderOption(
+    option: Option,
+    data: Pick<SelectableRender, 'getOptionProps' | 'getDisabledOptionProps'>
+  ) {
     const { getOptionProps, getDisabledOptionProps } = data
     const {
       id,
@@ -374,19 +345,21 @@ class Select extends Component<SelectProps> {
       children
     } = option.props
 
-    const getRenderLabel = (renderLabel: any) => {
-      return typeof renderLabel === 'function'
-        ? renderLabel.bind(null, {
+    const getRenderOptionLabel = (
+      renderOptionLabel: RenderSelectOptionLabel
+    ): React.ReactNode => {
+      return typeof renderOptionLabel === 'function'
+        ? renderOptionLabel.bind(null, {
             id,
             isDisabled,
             isSelected,
             isHighlighted,
             children
           })
-        : renderLabel
+        : renderOptionLabel
     }
 
-    let optionProps = {
+    let optionProps: Partial<OptionsItemProps> = {
       // passthrough props
       ...omitProps(option.props, [
         ...Option.allowedProps,
@@ -395,8 +368,8 @@ class Select extends Component<SelectProps> {
       // props from selectable
       ...getOptionProps({ id }),
       // Options.Item props
-      renderBeforeLabel: getRenderLabel(renderBeforeLabel),
-      renderAfterLabel: getRenderLabel(renderAfterLabel)
+      renderBeforeLabel: getRenderOptionLabel(renderBeforeLabel),
+      renderAfterLabel: getRenderOptionLabel(renderAfterLabel)
     }
     // should option be treated as highlighted or selected
     if (isSelected) {
@@ -410,15 +383,23 @@ class Select extends Component<SelectProps> {
       optionProps = { ...optionProps, ...getDisabledOptionProps() }
     } else {
       // track as valid option if not disabled
-      // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'any' is not assignable to parame... Remove this comment to see the full error message
       this._optionIds.push(id)
     }
 
     return <Options.Item {...optionProps}>{children}</Options.Item>
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'group' implicitly has an 'any' type.
-  renderGroup(group, data) {
+  renderGroup(
+    group: Group,
+    data: Pick<
+      SelectableRender,
+      'getOptionProps' | 'getDisabledOptionProps'
+    > & {
+      isFirstChild: boolean
+      isLastChild: boolean
+      afterGroup: boolean
+    }
+  ) {
     const {
       getOptionProps,
       getDisabledOptionProps,
@@ -427,7 +408,10 @@ class Select extends Component<SelectProps> {
       afterGroup
     } = data
     const { id, renderLabel, children, ...rest } = group.props
-    const groupChildren = []
+    const groupChildren: (
+      | React.ReactElement<OptionsItemProps>
+      | React.ReactElement<OptionsSeparatorProps>
+    )[] = []
     // add a separator above
     if (!isFirstChild && !afterGroup) {
       groupChildren.push(<Options.Separator />)
@@ -442,7 +426,7 @@ class Select extends Component<SelectProps> {
         renderLabel={renderLabel}
         {...omitProps(rest, [...Options.allowedProps, ...Group.allowedProps])}
       >
-        {Children.map(children, (child) => {
+        {Children.map(children as Option[], (child) => {
           return this.renderOption(child, {
             getOptionProps,
             getDisabledOptionProps
@@ -458,53 +442,50 @@ class Select extends Component<SelectProps> {
     return groupChildren
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'data' implicitly has an 'any' type.
-  renderList(data) {
+  renderList(
+    data: Pick<
+      SelectableRender,
+      'getListProps' | 'getOptionProps' | 'getDisabledOptionProps'
+    >
+  ) {
     const { getListProps, getOptionProps, getDisabledOptionProps } = data
-    const {
-      isShowingOptions,
-      optionsMaxWidth,
-      visibleOptionsCount,
-      children
-    } = this.props
+    const { isShowingOptions, optionsMaxWidth, visibleOptionsCount, children } =
+      this.props
 
     let lastWasGroup = false
-    const viewProps = isShowingOptions
+
+    const viewProps: Partial<ViewProps> = isShowingOptions
       ? {
           display: 'block',
           overflowY: 'auto',
-          // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
-          maxHeight: this._optionHeight * visibleOptionsCount,
+          maxHeight: this._optionHeight * visibleOptionsCount!,
           maxWidth: optionsMaxWidth || this.width,
           background: 'primary',
-          // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'node' implicitly has an 'any' type.
-          elementRef: (node) => (this._listView = node)
+          elementRef: (node: Element | null) => (this._listView = node)
         }
       : { maxHeight: 0 }
 
     return (
-      //@ts-expect-error TODO: fix this
       <View {...viewProps}>
         <Options
           {...getListProps({ as: 'ul', elementRef: this.handleListRef })}
         >
           {isShowingOptions
-            ? // @ts-expect-error ts-migrate(7030) FIXME: Not all code paths return a value.
-              Children.map(children, (child, index) => {
+            ? Children.map(children, (child, index) => {
                 if (!child || !matchComponentTypes(child, [Group, Option])) {
                   return // ignore invalid children
                 }
                 if (matchComponentTypes(child, [Option])) {
                   lastWasGroup = false
-                  return this.renderOption(child, {
+                  return this.renderOption(child as Option, {
                     getOptionProps,
                     getDisabledOptionProps
                   })
                 }
                 if (matchComponentTypes(child, [Group])) {
-                  const afterGroup = lastWasGroup ? true : false
+                  const afterGroup = lastWasGroup
                   lastWasGroup = true
-                  return this.renderGroup(child, {
+                  return this.renderGroup(child as Group, {
                     getOptionProps,
                     getDisabledOptionProps,
                     // for rendering separators appropriately
@@ -513,6 +494,7 @@ class Select extends Component<SelectProps> {
                     afterGroup
                   })
                 }
+                return
               })
             : null}
         </Options>
@@ -533,8 +515,9 @@ class Select extends Component<SelectProps> {
     )
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'data' implicitly has an 'any' type.
-  renderInput(data) {
+  renderInput(
+    data: Pick<SelectableRender, 'getInputProps' | 'getTriggerProps'>
+  ) {
     const { getInputProps, getTriggerProps } = data
     const {
       renderLabel,
@@ -560,51 +543,60 @@ class Select extends Component<SelectProps> {
     const passthroughProps = omitProps(rest, Select.allowedProps)
     const { ref, ...triggerProps } = getTriggerProps({ ...passthroughProps })
     const isEditable = typeof onInputChange !== 'undefined'
+
     // props to ensure screen readers treat uneditable selects as accessible
     // popup buttons rather than comboboxes.
-    const overrideProps = !isEditable
+    const overrideProps: Partial<TextInputProps> = !isEditable
       ? {
           role: 'button',
           title: inputValue,
-          'aria-autocomplete': null
+          'aria-autocomplete': undefined
         }
       : {}
+
     // backdoor to autocomplete attr to work around chrome autofill issues
     if (passthroughProps['autoComplete']) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'autoComplete' does not exist on type '{ ... Remove this comment to see the full error message
       overrideProps.autoComplete = passthroughProps['autoComplete']
     }
 
-    return (
-      <TextInput
-        {...triggerProps}
-        {...getInputProps({
-          id: this.id,
-          renderLabel,
-          placeholder,
-          size,
-          width,
-          htmlSize,
-          messages,
-          value: inputValue,
-          inputRef: createChainedFunction(ref, this.handleInputRef),
-          inputContainerRef: this.handleInputContainerRef,
-          interaction:
-            interaction === 'enabled' && !isEditable
-              ? 'readonly' // prevent keyboard cursor
-              : interaction,
-          isRequired,
-          shouldNotWrap,
-          display: isInline ? 'inline-block' : 'block',
-          renderBeforeInput,
-          renderAfterInput: renderAfterInput || this.renderIcon(),
-          onChange: onInputChange,
-          onFocus,
-          onBlur: createChainedFunction(onBlur, onRequestHideOptions),
-          ...overrideProps
-        })}
-      />
-    )
+    const inputProps: Partial<TextInputProps> = {
+      id: this.id,
+      renderLabel,
+      placeholder,
+      size,
+      width,
+      htmlSize,
+      messages,
+      value: inputValue,
+      inputRef: createChainedFunction(ref, this.handleInputRef),
+      inputContainerRef: this.handleInputContainerRef,
+      interaction:
+        interaction === 'enabled' && !isEditable
+          ? 'readonly' // prevent keyboard cursor
+          : interaction,
+      isRequired,
+      shouldNotWrap,
+      display: isInline ? 'inline-block' : 'block',
+      renderBeforeInput,
+      renderAfterInput: renderAfterInput || this.renderIcon(),
+
+      // If `inputValue` is provided, we need to pass a default onChange handler,
+      // because TextInput `value` is a controlled prop,
+      // and onChange is not required for Select
+      // (before it was handled by TextInput's defaultProp)
+      onChange:
+        typeof onInputChange === 'function'
+          ? onInputChange
+          : inputValue
+          ? () => {}
+          : undefined,
+
+      onFocus,
+      onBlur: createChainedFunction(onBlur, onRequestHideOptions),
+      ...overrideProps
+    }
+
+    return <TextInput {...triggerProps} {...getInputProps(inputProps)} />
   }
 
   render() {
@@ -626,7 +618,7 @@ class Select extends Component<SelectProps> {
       <Selectable
         highlightedOptionId={highlightedOptionId}
         isShowingOptions={isShowingOptions}
-        selectedOptionId={selectedOptionId ? selectedOptionId : null}
+        selectedOptionId={selectedOptionId}
         {...this.getEventHandlers()}
       >
         {({