fix: exclude input with value from keyboard arrow navigation

Author: abelflopes

packages/docs/stories/src/test-elevation.stories.tsx

@@ -16,6 +16,7 @@ import {
   useSnackbar,
   Manager,
   Icon,
+  Input,
 } from "react-ck";
 import { faker } from "@faker-js/faker";
 import { IconVerticalDots } from "@react-ck/icon/icons/IconVerticalDots";
@@ -301,12 +302,15 @@ const Counter = (): React.ReactElement => {
   );
 };
 
-const SelectField = (): React.ReactElement => (
-  <Select placeholder="Select">
-    <Select.Option>1</Select.Option>
-    <Select.Option>2</Select.Option>
-    <Select.Option>3</Select.Option>
-  </Select>
+const Fields = (): React.ReactElement => (
+  <>
+    <Input placeholder="Input" />
+    <Select placeholder="Select">
+      <Select.Option>1</Select.Option>
+      <Select.Option>2</Select.Option>
+      <Select.Option>3</Select.Option>
+    </Select>
+  </>
 );
 
 const AllItems = ({ children }: { readonly children: React.ReactNode }): React.ReactElement => {
@@ -355,14 +359,14 @@ const App = (): React.ReactElement => (
 
     <Counter />
 
-    <SelectField />
+    <Fields />
 
     <AllItems>
       <Text>{faker.lorem.paragraph()}</Text>
 
       <Counter />
 
-      <SelectField />
+      <Fields />
 
       <Actions />
     </AllItems>

packages/utils/keyboard-controls/src/index.ts

@@ -60,7 +60,17 @@ export class KeyboardControls {
   private handleFocusWithArrows = (e: KeyboardEvent): void => {
     const currentElement = document.activeElement;
 
-    if (!currentElement) return;
+    // skip if no focused element
+    // or content editable element
+    // or current element is an input or textarea with value
+    if (
+      !currentElement ||
+      (currentElement instanceof HTMLElement && currentElement.isContentEditable) ||
+      (currentElement instanceof HTMLInputElement &&
+        currentElement.value &&
+        (currentElement.tagName === "INPUT" || currentElement.tagName === "TEXTAREA"))
+    )
+      return;
 
     const { focusableElements } = getFocusableElements({
       container: this.container,