Don't show tNoResults when debouncing

When a `source` query has yet to be called, it's not necessary to show
"no results found". Pass the debouncing state of the autocomplete down
to the Status component through Status.props.autocompleteDebouncing
such that the status component does not announce "no results available"
immediately before announcing "50 results available".

From the autocomplete, this is difficult to test. Tests already exist
showing that `this.state.debouncing` is set appropriately when
`debounceMs` is in use. It is used in conjunction with the
`showNoOptionsFound` prop to suppress tNoResults in render().

No good option exists for testing it that doesn't involve extra
redundant state to service the tests. It can't be done by rendering
tests alone, and it can't be done by behaviour tests alone.

src/autocomplete.js

@@ -67,6 +67,7 @@ export default class Autocomplete extends Component {
       menuOpen: false,
       options: props.defaultValue ? [props.defaultValue] : [],
       query: props.defaultValue,
+      debouncing: false,
       validChoiceMade: false,
       selected: null,
       ariaHint: true
@@ -230,9 +231,11 @@ export default class Autocomplete extends Component {
 
     const searchForOptions = showAllValues || (!queryEmpty && queryChanged && queryLongEnough)
     if (searchForOptions) {
+      this.setState({debouncing: true})
       this.debouncedSource(query, (options) => {
         const optionsAvailable = options.length > 0
         this.setState({
+          debouncing: false,
           menuOpen: optionsAvailable,
           options,
           selected: (autoselect && optionsAvailable) ? 0 : -1,
@@ -425,7 +428,7 @@ export default class Autocomplete extends Component {
       dropdownArrow: dropdownArrowFactory,
       menuAttributes
     } = this.props
-    const { focused, hovered, menuOpen, options, query, selected, ariaHint, validChoiceMade } = this.state
+    const { focused, hovered, menuOpen, options, debouncing, query, selected, ariaHint, validChoiceMade } = this.state
     const autoselect = this.hasAutoselect()
 
     const inputFocused = focused === -1
@@ -483,6 +486,7 @@ export default class Autocomplete extends Component {
           length={options.length}
           queryLength={query.length}
           minQueryLength={minLength}
+          autocompleteDebouncing={debouncing}
           selectedOption={this.templateInputValue(options[selected])}
           selectedOptionIndex={selected}
           validChoiceMade={validChoiceMade}
@@ -558,7 +562,7 @@ export default class Autocomplete extends Component {
             )
           })}
 
-          {showNoOptionsFound && (
+          {showNoOptionsFound && !debouncing && (
             <li className={`${optionClassName} ${optionClassName}--no-results`}>{tNoResults()}</li>
           )}
         </ul>

src/status.js

@@ -5,6 +5,7 @@ const statusDebounceMillis = 1400
 
 export default class Status extends Component {
   static defaultProps = {
+    autocompleteDebouncing: false,
     tQueryTooShort: (minQueryLength) => `Type in ${minQueryLength} or more characters for results`,
     tNoResults: () => 'No search results',
     tSelectedOption: (selectedOption, length, index) => `${selectedOption} ${index + 1} of ${length} is highlighted`,
@@ -27,7 +28,7 @@ export default class Status extends Component {
     const that = this
     this.debounceStatusUpdate = debounce(function () {
       if (!that.state.debounced) {
-        const shouldSilence = !that.props.isInFocus || that.props.validChoiceMade
+        const shouldSilence = !that.props.isInFocus || that.props.validChoiceMade || that.props.autocompleteDebouncing
         that.setState(({ bump }) => ({ bump: !bump, debounced: true, silenced: shouldSilence }))
       }
     }, statusDebounceMillis)

test/functional/index.js

@@ -726,6 +726,22 @@ describe('Status', () => {
             done()
           }, 1500)
         })
+
+        it('when the parent autocomplete is debouncing', (done) => {
+          let status = new Status({
+            ...Status.defaultProps,
+            validChoiceMade: false,
+            isInFocus: true,
+            autocompleteDebouncing: true
+          })
+          status.componentWillMount()
+          status.render()
+
+          setTimeout(() => {
+            expect(status.state.silenced).to.equal(true)
+            done()
+          }, 1500)
+        })
       })
       describe('does not silence aria live announcement', () => {
         it('when a valid choice has not been made and the input has focus', (done) => {