Merge pull request #621 from alphagov/rpa-handle-query-change

Handle query change when the text length does not change
alphagov · Jan 12, 2024 · 9010b0b · 9010b0b
2 parents 180c230 + 58822ea
commit 9010b0b
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- [Pull request #621: Handle query change when the text length does not change](https://github.com/alphagov/accessible-autocomplete/pull/621)
 - [Pull request #620: Add `className` attribute to status component](https://github.com/alphagov/accessible-autocomplete/pull/620)
 - [Pull request #591: Add menuAttributes to fix #361](https://github.com/alphagov/accessible-autocomplete/pull/591)
 

diff --git a/dist/accessible-autocomplete.min.js b/dist/accessible-autocomplete.min.js
diff --git a/dist/accessible-autocomplete.min.js.map b/dist/accessible-autocomplete.min.js.map
diff --git a/dist/lib/accessible-autocomplete.preact.min.js b/dist/lib/accessible-autocomplete.preact.min.js
diff --git a/dist/lib/accessible-autocomplete.preact.min.js.map b/dist/lib/accessible-autocomplete.preact.min.js.map
diff --git a/dist/lib/accessible-autocomplete.react.min.js b/dist/lib/accessible-autocomplete.react.min.js
diff --git a/dist/lib/accessible-autocomplete.react.min.js.map b/dist/lib/accessible-autocomplete.react.min.js.map
diff --git a/src/autocomplete.js b/src/autocomplete.js
@@ -215,7 +215,7 @@ export default class Autocomplete extends Component {
     const autoselect = this.hasAutoselect()
     const query = event.target.value
     const queryEmpty = query.length === 0
-    const queryChanged = this.state.query.length !== query.length
+    const queryChanged = this.state.query !== query
     const queryLongEnough = query.length >= minLength
 
     this.setState({

diff --git a/test/functional/index.js b/test/functional/index.js
@@ -194,6 +194,12 @@ describe('Autocomplete', () => {
         expect(autocomplete.state.menuOpen).to.equal(false)
       })
 
+      it('searches with the new term when query length changes', () => {
+        autocomplete.setState({ query: 'fr', options: ['France'] })
+        autocomplete.handleInputChange({ target: { value: 'fb' } })
+        expect(autocomplete.state.options.length).to.equal(0)
+      })
+
       it('removes the aria-describedby attribute when query is non empty', () => {
         expect(autocomplete.state.ariaHint).to.equal(true)
         autocomplete.handleInputChange({ target: { value: 'a' } })