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', () => {