Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
ali-shafi-hff opened this issue Aug 23, 2024 · 11 comments · May be fixed by #3735
Open

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

ali-shafi-hff opened this issue Aug 23, 2024 · 11 comments · May be fixed by #3735
Assignees
@macci001
Labels
📦 Scope : Components Related to the components 🐛 Type: Bug Something isn't working

Comments

@ali-shafi-hff
Copy link

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 Linear
Copy link

linear bot commented Aug 23, 2024

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

@wingkwong wingkwong added 🐛 Type: Bug Something isn't working 📦 Scope : Components Related to the components labels Aug 23, 2024
@abhijain1705
Copy link

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
Copy link
Author

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.

@ali-shafi-hff ali-shafi-hff reopened this Aug 26, 2024
@ScriptShah
Copy link

I like to work on this please assign me.

@ali-shafi-hff
Copy link
Author

I like to work on this please assign me.

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

@soyeon9211
Copy link

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
Copy link

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
Copy link
Author

ali-shafi-hff commented Sep 4, 2024 •
edited
Loading

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

#3661 (comment)

@macci001
Copy link
Contributor

May I work on this? @wingkwong

@wingkwong
Copy link
Member

@macci001 go ahead

@macci001 macci001 linked a pull request Sep 10, 2024 that will close this issue
Open
@ryo-manba ryo-manba mentioned this issue Oct 8, 2024
Open
@MariuzM
Copy link

MariuzM commented Oct 27, 2024

Hoping this will be added fast really missing thing :(

@coderabbitai coderabbitai bot mentioned this issue Oct 30, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@macci001 macci001

Labels
📦 Scope : Components Related to the components 🐛 Type: Bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(table): Add an isKeyboardNavigationDisabled prop to disable the navigation macci001/nextui
7 participants
@ScriptShah @wingkwong @MariuzM @macci001 @abhijain1705 @soyeon9211 @ali-shafi-hff