iddan / react-spreadsheet

Simple, customizable yet performant spreadsheet for React
https://iddan.github.io/react-spreadsheet
MIT License
1.25k stars 151 forks source link

Autofocus / auto input doesn't work on Firefox browser? #192

Open barnij opened 2 years ago

barnij commented 2 years ago

Hi! Thank you all for contributing to this project! I got a weird problem and would be grateful for any help. When I start typing inside the cell on Chrome browser, spreadsheet automatically switches to editor mode and puts a letter in the input field. On Mozilla Firefox, key pressing turns on edit mode, but I have to press another key to start typing. You can see that default effect on author's page: https://iddan.github.io/react-spreadsheet/ Is there any way to reproduce Chrome behavior in Firefox?

iddan commented 2 years ago

I am not sure but this sounds like a bug. I don't have the bandwidth to triage it right now (sorry for the late response). PRs are welcome!

cayman1066 commented 2 years ago

Fantastic project! I've got the same Firefox issue that @barnij reported. Another side effect of Mode defaulting to 'view' is that I cannot paste any data into the spreadsheet, which I can do in Chrome. As a work around, I was hoping to find way to manually set Mode to 'edit' on focus, but I cannot find any way to do this. Any chance you will find the bandwidth to triage this?

Lucas-Bezerra-Santos commented 10 months ago

@iddan some updates on this bug?

iddan commented 10 months ago

I haven't researched it further. PRs are welcome 🙏

isimonsm commented 9 months ago

Hi @iddan, thank you for the cool project! I was digging into this issue and figured out that it results from the keypress event being handled differently in firefox compared to chrome. The issue can be resolved by replacing the onKeyPress event handlers with onKeyDown event handlers. The keypress event is deprecated anyways. You can check out the difference in this simple example: https://stackblitz.com/edit/vitejs-vite-rvc3re?file=src%2FApp.tsx

Would you be able to make this change? I would be willing to implement it, but I am unsure if there is a reason you separated the onKeyDown and onKeyPress event handlers I am not seeing.

iddan commented 9 months ago

Hey @isimonsm, The code I wrote for onKeyPress was done a long time ago so I'm not really sure why did I do it that way but not sure there's a good reasoning for that. I would love to review a PR that fixes it.

Yohh commented 8 months ago

@iddan hi, nice work! is it ok if we add a setMode props to enable "edit" or "view" and render directly the DataEditor instead of DataViewer if we want ?

actually mode is readonly and cannot be changed by default

@isimonsm I've try to remove onKeyPress and totally replace it with onKeyDown, it doesn't solve anything, I'm still convinced that the real problem is about the mode staying "view" in firefox even with a key press

iddan commented 4 weeks ago

Hey @Yohh, sorry for the very late response. Is this still relevant for the newest version?