Remove ref

yext · Oct 28, 2021 · 972372f · 972372f
1 parent 0f5cecd
commit 972372f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 24 deletions.
diff --git a/sample-app/src/components/InputDropdown.tsx b/sample-app/src/components/InputDropdown.tsx
@@ -80,6 +80,10 @@ export default function InputDropdown({
 
   const inputRef = useRef<HTMLInputElement>(document.createElement('input'));
 
+  if (!shouldDisplayDropdown && countKey) {
+    setCountKey(0);
+  }
+
   function handleDocumentClick(evt: MouseEvent) {
     const target = evt.target as HTMLElement;
     if (!target.isSameNode(inputRef.current)) {
@@ -154,10 +158,8 @@ export default function InputDropdown({
           instructionsId={screenReaderInstructionsId}
           instructions={screenReaderInstructions}
           shouldCount={shouldAutocompleteCount}
-          hasInput={!!inputRef.current.value}
-          optionsLength={options.length}
-          shouldDisplayOptions={shouldDisplayDropdown}
           countKey={countKey}
+          optionsLength={options.length}
           generateCountText={(numOptions: number) => {
             return processTranslation({
               phrase: `${numOptions} autocomplete option found.`,

diff --git a/sample-app/src/components/ScreenReader.tsx b/sample-app/src/components/ScreenReader.tsx
@@ -1,14 +1,11 @@
-import { useRef } from "react";
 import '../sass/ScreenReader.scss';
 
 interface Props {
   instructionsId?: string,
   instructions?: string,
   shouldCount: boolean,
-  shouldDisplayOptions?: boolean,
-  hasInput?: boolean,
-  optionsLength?: number,
   countKey?: number,
+  optionsLength?: number,
   generateCountText?: (numOptions: number) => string,
   cssClasses: {
     screenReaderInstructions?: string,
@@ -20,26 +17,13 @@ export default function ScreenReader({
   instructionsId,
   instructions,
   shouldCount,
-  shouldDisplayOptions,
-  hasInput,
-  optionsLength = 0,
   countKey,
+  optionsLength = 0,
   generateCountText = () => '',
   cssClasses
 } : Props): JSX.Element | null {
 
-  const countRef = useRef<HTMLDivElement>(document.createElement('div'));
-  const prevAutocompleteCountText = countRef.current.innerText;
-
-  if (!shouldDisplayOptions || !(hasInput || optionsLength || prevAutocompleteCountText)) {
-    removeAutocompleteCountText();
-  }
-
-  function removeAutocompleteCountText() {
-    if (shouldCount && countRef.current.innerText !== '') {
-      countRef.current.innerText = '';
-    }
-  }
+  const countText = countKey ? generateCountText(optionsLength) : '';
 
   return (
     <>
@@ -56,9 +40,8 @@ export default function ScreenReader({
           className={cssClasses.screenReaderCount}
           key={countKey}
           aria-live='assertive'
-          ref={countRef}
         >
-          {generateCountText(optionsLength)}
+          {countText}
         </div>
       }
     </>