Inline arrow key navigation in Input & Textarea not working (Table)

[ali-shafi-hff]

I am new using Next UI, I have a scenario where I have a Table component and inside the table I have an input/textarea field, if i try to edit the text using arrow keys the navigation takes me to next cell of table.
I have tried using e.preventDefault(); but it doesn't work. how do I disable the arrow key navigation in table and allow user to navigate the text.

Following is my code:

const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
   const { key } = e;
   if (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight') {
       e.stopPropagation(); // Prevent the event from bubbling up to the table
        // Optionally, you can prevent default behavior to stop scrolling, if any
       e.preventDefault();   
}};

<TableCell className="px-0.5">
    <div>
       <Textarea
            variant="bordered"
            maxRows={1}
            minRows={1}
            placeholder="Name"
            disableAnimation
            onChange={(e) => onDetailChange(e.target.value, index, 'name')}
           defaultValue={employee.name}
            classNames={{
                input: "resize-y",
            }}
            onKeyDown={(e) => handleKeyDown(e)}
        />
    </div>
</TableCell>

[soyeon9211]

I have same issue of this
Is there some solutions of it?

[ali-shafi-hff]

I added a custom solution in thread.
I hope that helps.

[ali-shafi-hff]

@soyeon9211

I ended up using the table from html, Below is the code with Custom CSS to make it look like NextUI:

JSX:

return (
        <>
            <div className="flex flex-col gap-3 overflow-auto">
                <table className="table-custom" aria-label="My Table">
                    <thead>
                        <tr className="tr-custom">
                            <th className={"th-custom px-2 bg-gray-600 text-white"}>
                                <div className="min-w-64">First Name</div>
                            </th>
                            <th className={"th-custom px-2 bg-gray-600 text-white"}>
                                <div className="min-w-20">Last Name</div>
                            </th>
                            <th className={"th-custom px-2 bg-gray-600 text-white"}>
                                <div className="min-w-24">Profession</div>
                            </th>
                            <th className={"th-custom px-2 bg-gray-600 text-white"}>
                                <div className="min-w-24">Salary</div>
                            </th>
                            <th className={"th-custom px-2 bg-gray-600 text-white"}>
                                <div className="min-w-72">About</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {employeeDetails?.map((employee: any, index: number) => (
                            <tr className="tr-custom" key={employee.id}>
                                <td className={"td-custom"}>
                                    <Input placeholder="First Name" variant="bordered"
                                           onChange={(e) => onDetailChange(e.target.value)}
                                           defaultValue={employee.first_name ?? ""}
                                    />
                                </td>
                                <td className={"td-custom"}>
                                    <Input isRequired required placeholder="Last Name" variant="bordered"
                                           onChange={(e) => onDetailChange(e.target.value)}
                                           defaultValue={employee.last_name ?? ""}
                                    />
                                </td>
                                <td className={"td-custom"}>
                                    <Input placeholder="Profession" variant="bordered"
                                           onChange={(e) => onDetailChange(e.target.value)}
                                           defaultValue={employee.profession ?? ""}
                                    />
                                </td>
                                <td className={"td-custom"}>
                                    <Input placeholder="Salary" variant="bordered"
                                           type="number" min="0"
                                           onChange={(e) => onDetailChange(e.target.value)}
                                           defaultValue={employee.salary ?? ""}
                                    />
                                </td>
                                <td className={"td-custom"}>
                                    <Textarea 
                                        variant="bordered" minRows={1} maxRows={4}
                                        placeholder="About"
                                        disableAnimation
                                        onChange={(e) => onDetailChange(e.target.value)}
                                        defaultValue={employee.about ?? ""}
                                        classNames={{
                                            input: "min-h-5",
                                        }}
                                    />
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </>
    );
}

Import the styles file in same component:
import "./styles/CustomTable.scss"

CustomTable.scss

.table-custom {
  border-collapse: collapse;
  width: 100%;
  overflow: hidden;
}

.td-custom, .th-custom {
  text-align: left;
  //padding: 8px;
}

.th-custom{
  font-weight: 600;
  font-size: var(--nextui-font-size-tiny);
  line-height: var(--nextui-line-height-tiny);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  height: 2.5rem;
}

.td-custom{
  font-weight: 400;
  font-size: var(--nextui-font-size-small);
  line-height: var(--nextui-line-height-small);
  padding-top: 0.5rem;
  //padding-bottom: 0.5rem;
  //padding-left: 0.75rem;
  //padding-right: 0.75rem;
  white-space: normal;
}

.table-custom .th-custom:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.table-custom .th-custom:last-child {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.tr-custom:nth-child(odd) {
  background-color: #f4f4f5;
}

[AntreasPetsas]

Hello @ali-shafi-hff. I had the same issue as your. After some investigation I noticed that this issue has been resolved by nextui on the latest minor update v.2.6.0. These are the changes https://nextui.org/blog/v2.6.0. On the Table component, they have added isKeyboardNavigationDisabled attribute which is basically disables keyboard navigation in tables. Here is How I am using it and it fixes the issue

<Table
   ...
   classNames={{
     ...
   }}
   isKeyboardNavigationDisabled
>
    ...
    ...
</Table>