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<HTMLTextAreaElement>) => { const parent = e.currentTarget.closest('table'); if (parent) { parent.addEventListener('keydown', handleKeyDown); } };

const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => { 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 :(

[nwidynski]

I started work on edit mode upstream in https://github.com/adobe/react-spectrum/pull/7277. Posting this here to gather early feedback on which behavior this is still missing for some people 👍

[lukecleland]

I'm guessing this was implemented since but for anyone looking for the solution in this thread the attribute to fix the issue is isKeyboardNavigationDisabled

[RomainLAU]

I'm guessing this was implemented since but for anyone looking for the solution in this thread the attribute to fix the issue is isKeyboardNavigationDisabled

Hello, even with this attribute I'm still having an issue when typing " " (a space), if the input is empty it doesn't do anything and if there is a value before, I will need to press the key several times before any space is added, and even weirder, when the spaces are added, my cursor stays after the last word, do anyone have this issue ?