[DISCO-146] Fix colorpicker focus

openstax · Mar 21, 2024 · 6cfe5e8 · 6cfe5e8
1 parent b78ee4d
commit 6cfe5e8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 14 deletions.
diff --git a/src/app/content/highlights/components/ColorPicker.spec.tsx b/src/app/content/highlights/components/ColorPicker.spec.tsx
@@ -89,7 +89,7 @@ describe('ColorPicker', () => {
     const onRemove = jest.fn();
     const {root} = renderToDom(
       <TestContainer>
-        <ColorPicker onChange={onChange} onRemove={onRemove} />
+        <ColorPicker color={highlightStyles[0].label} onChange={onChange} onRemove={onRemove} />
       </TestContainer>
     );
     const rg = root.querySelector('[role="radiogroup"]') as HTMLDivElement;

diff --git a/src/app/content/highlights/components/ColorPicker.tsx b/src/app/content/highlights/components/ColorPicker.tsx
@@ -104,22 +104,18 @@ const ColorPicker = ({className, ...props}: Props) => {
     },
     []
   );
-  const initialFocus = React.useCallback(
-    (event: React.FocusEvent) => {
-      if (!ref.current || event.currentTarget !== event.target) {
-        return;
-      }
-      const firstChecked = ref.current.querySelector<HTMLInputElement>('input[checked]');
-
-      if (firstChecked) {
-        firstChecked.focus();
-      } else {
-        ref.current.querySelector<HTMLInputElement>('input')?.focus();
+  const color = (props as SingleSelectProps).color;
+  const focusOnSelected = React.useCallback(
+    () => {
+      if (color && document?.activeElement === ref.current) {
+        ref.current?.querySelector<HTMLInputElement>(`input[name="${color}"]`)?.focus();
       }
     },
-    []
+    [color]
   );
 
+  React.useEffect(focusOnSelected, [focusOnSelected]);
+
   return (
     <div
       className={className}
@@ -128,7 +124,7 @@ const ColorPicker = ({className, ...props}: Props) => {
       aria-label='colors'
       ref={ref}
       onKeyDown={handleKeyNavigation}
-      onFocus={initialFocus}
+      onFocus={focusOnSelected}
     >
       {highlightStyles.map((style) => <ColorButton key={style.label}
         name={style.label}