Cannot perform inline editing of input/textarea if in table cell

[ali-shafi-hff]

NextUI Version

2.4.5

Describe the bug

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.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Create a table and inside table cell add input field or textarea.

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>

Expected behavior

It should let me perform inline editing and not navigate to next cell.

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear[bot]]

ENG-1292 Cannot perform inline editing of input/textarea if in table cell

[abhijain1705]

have you tried using onFocus and onBlur to actually manage the focus and blur

const handleFocus = (e: React.FocusEvent) => { const parent = e.currentTarget.closest('table'); if (parent) { parent.addEventListener('keydown', handleKeyDown); } };

const handleBlur = (e: React.FocusEvent) => { const parent = e.currentTarget.closest('table'); if (parent) { parent.removeEventListener('keydown', handleKeyDown); } };

[ali-shafi-hff]

have you tried using onFocus and onBlur to actually manage the focus and blur

const handleFocus = (e: React.FocusEvent) => { const parent = e.currentTarget.closest('table'); if (parent) { parent.addEventListener('keydown', handleKeyDown); } };

const handleBlur = (e: React.FocusEvent) => { const parent = e.currentTarget.closest('table'); if (parent) { parent.removeEventListener('keydown', handleKeyDown); } };

I tried this but this only prevents me from going to next cell which is good but still on pressing arrow keys I am not able to move the cursor within text. Typing works but not the navigation.

[ScriptShah]

I like to work on this please assign me.

[ali-shafi-hff]

I like to work on this please assign me.

@ahmaddonishyar Sure you can work on that. are you able to reproduce it?

[soyeon9211]

I have same issue too :( And also if I don't set input.current.focus() then I can't type input at all. I don't understand why everytime the document.activeItem is tag even I click the input

It seems like it is adjusting the events (click, type event etc... ) in the table cell itself, but it would be nice if there was a disable function. Otherwise, we'll run into obstacles every time we create a custom cell.

[soyeon9211]

Any update with this Issue? @ahmaddonishyar I need to deploy my project but I don't want to deploy with this issue :(

[ali-shafi-hff]

@soyeon9211 you can check this alternate solution if you want, it involves creating custom table component.

https://github.com/nextui-org/nextui/discussions/3661#discussioncomment-10484070

[macci001]

May I work on this? @wingkwong

[wingkwong]

@macci001 go ahead

[MariuzM]

Hoping this will be added fast really missing thing :(