MMT-3926: Fix for Science Keyword Picker Adds An Additional Science Keyword That Was Not Originally Selected

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 = ({
               <div className="eui-item-list-pane" style={{ marginTop }}>
                 <div className="keyword-picker__search-keywords">
                   <Typeahead
+                    ref={typeaheadRef}
                     clearButton
                     id="keyword-picker-search"
                     isLoading={loading}

static/src/js/components/KeywordPicker/__tests__/KeywordPicker.test.jsx

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 
+import { test } from 'vitest'
 import useControlledKeywords from '../../../hooks/useControlledKeywords'
 
 import parseCmrResponse from '../../../utils/parseCmrResponse'
@@ -346,24 +347,39 @@ describe('when removing selected keyword', () => {
 })
 
 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', () => {