diff --git a/static/src/js/components/KeywordPicker/KeywordPicker.jsx b/static/src/js/components/KeywordPicker/KeywordPicker.jsx
index e1a38806c..70afe2398 100644
--- a/static/src/js/components/KeywordPicker/KeywordPicker.jsx
+++ b/static/src/js/components/KeywordPicker/KeywordPicker.jsx
@@ -1,4 +1,8 @@
-import React, { useEffect, useState } from 'react'
+import React, {
+ useEffect,
+ useRef,
+ useState
+} from 'react'
import PropTypes from 'prop-types'
import { cloneDeep, isEmpty } from 'lodash-es'
import { Typeahead } from 'react-bootstrap-typeahead'
@@ -48,6 +52,7 @@ const KeywordPicker = ({
const [marginTop, setMarginTop] = useState(0)
const [marginLeft, setMarginLeft] = useState(0)
+ const typeaheadRef = useRef(null)
const filterKeywords = (path) => {
const filteredPath = []
@@ -272,6 +277,7 @@ const KeywordPicker = ({
}
onChange(formData)
+ typeaheadRef.current.clear()
}
const displayItems = (item) => {
@@ -427,6 +433,7 @@ const KeywordPicker = ({
{
})
describe('when searching for a keyword', () => {
- test('adds the searched keyword', async () => {
- const { props, user } = setup()
+ describe('and user selects a keyword', () => {
+ test('adds the searched keyword', async () => {
+ const { props, user } = setup()
+
+ const searchBox = screen.getByRole('combobox')
+
+ await user.type(searchBox, 'Earth')
+ const option = screen.getByRole('option', { name: 'EARTH SCIENCE SERVICES>DATA ANALYSIS AND VISUALIZATION>GEOGRAPHIC INFORMATION SYSTEMS>DESKTOP GEOGRAPHIC INFORMATION SYSTEMS' })
+ await user.click(option)
+
+ expect(props.onChange).toHaveBeenCalledTimes(1)
+ expect(props.onChange).toHaveBeenCalledWith([
+ {
+ ToolCategory: 'EARTH SCIENCE SERVICES',
+ ToolTopic: 'DATA ANALYSIS AND VISUALIZATION',
+ ToolTerm: 'GEOGRAPHIC INFORMATION SYSTEMS',
+ ToolSpecificTerm: 'DESKTOP GEOGRAPHIC INFORMATION SYSTEMS'
+ }
+ ])
+ })
- const searchBox = screen.getByRole('combobox')
+ test('clears the search box after the selection', async () => {
+ const { user } = setup()
- await user.type(searchBox, 'Earth')
- const option = screen.getByRole('option', { name: 'EARTH SCIENCE SERVICES>DATA ANALYSIS AND VISUALIZATION>GEOGRAPHIC INFORMATION SYSTEMS>DESKTOP GEOGRAPHIC INFORMATION SYSTEMS' })
- await user.click(option)
+ const searchBox = screen.getByRole('combobox')
- expect(props.onChange).toHaveBeenCalledTimes(1)
- expect(props.onChange).not.toHaveBeenCalledWith([
- {
- ToolCategory: 'EARTH SCIENCE SERVICES',
- ToolTopic: 'DATA ANALYSIS AND VISUALIZATION',
- ToolTerm: 'CALIBRATION/VALIDATION',
- ToolSpecificTerm: undefined
- }
- ])
+ await user.type(searchBox, 'Earth')
+
+ expect(searchBox).toHaveValue('Earth')
+ const option = screen.getByRole('option', { name: 'EARTH SCIENCE SERVICES>DATA ANALYSIS AND VISUALIZATION>GEOGRAPHIC INFORMATION SYSTEMS>DESKTOP GEOGRAPHIC INFORMATION SYSTEMS' })
+ await user.click(option)
+ expect(searchBox).toHaveValue('')
+ })
})
describe('when keyword recommender is included', () => {