Fix the broken deeplink of support form

Summary:
I just noticed that the deeplink of the support form didn't select the right group. It got broken after the recent design change of the support form. This diff fixes that issue.

I have also added unit tests.

Reviewed By: passy

Differential Revision: D21817153

fbshipit-source-id: 06298b3b60cfc1bd77bea6c1f902b983474808dc

desktop/app/src/chrome/DropDownSearchView.tsx

@@ -71,6 +71,7 @@ function RowComponent(props: {
 }) {
   return (
     <RowComponentContainer
+      data-testid={'row-component'}
       onClick={() => {
         props.onClick(props.elem.id);
       }}>
@@ -85,15 +86,11 @@ function RowComponent(props: {
 
 export default function (props: Props) {
   const {list, handleNoResults, onSelect, selectedElementID} = props;
-  const initialElement = list.find((e) => {
-    return e.id === selectedElementID;
-  });
+
   const [filteredElements, setFilteredElements] = useState<Array<Element>>([]);
-  const [searchedValue, setSearchedValue] = useState<string>(
-    initialElement ? initialElement.label : '',
-  );
+  const [searchedValue, setSearchedValue] = useState<string>('');
   const [selectedElement, setSelectedElement] = useState<Element | undefined>(
-    initialElement,
+    undefined,
   );
   const [focussed, setFocus] = useState<boolean>(false);
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -129,6 +126,16 @@ export default function (props: Props) {
     [setFocus],
   );
 
+  // Set the searched value and selectedElement when the selectedElementID changes.
+  useEffect(() => {
+    const initialElement = list.find((e) => e.id === selectedElementID);
+    if (initialElement) {
+      setSearchedValue(initialElement.label);
+    }
+    setSelectedElement(initialElement);
+    setFocus(false);
+  }, [selectedElementID, list]);
+
   // Effect to filter items
   useEffect(() => {
     if (searchedValue.length > 0) {
@@ -195,6 +202,7 @@ export default function (props: Props) {
             onFocus={onFocusCallBack}
             value={searchedValue}
             isValidInput={false}
+            data-testid={'search-input'}
           />
         </SearchBox>
       </Tooltip>
@@ -203,14 +211,14 @@ export default function (props: Props) {
           <ListViewContainer scrollable={true}>
             {filteredElements.map((e, idx) => {
               return (
-                <>
+                <FlexColumn key={idx}>
                   <RowComponent
                     elem={e}
                     onClick={onSelectCallBack}
                     selected={selectedElement && e.id == selectedElement.id}
                   />
                   {idx < filteredElements.length - 1 && <Separator />}
-                </>
+                </FlexColumn>
               );
             })}
           </ListViewContainer>