react-spreadsheet icon indicating copy to clipboard operation
react-spreadsheet copied to clipboard

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

Open barnij opened this issue 4 years ago • 9 comments

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?

barnij avatar Jan 07 '22 15:01 barnij

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!

iddan avatar Feb 05 '22 20:02 iddan

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?

cayman1066 avatar Jul 20 '22 15:07 cayman1066

@iddan some updates on this bug?

Lucas-Bezerra-Santos avatar Sep 13 '23 12:09 Lucas-Bezerra-Santos

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

iddan avatar Sep 18 '23 14:09 iddan

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.

isimonsm avatar Oct 25 '23 09:10 isimonsm

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.

iddan avatar Nov 01 '23 10:11 iddan

@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

Yohh avatar Nov 22 '23 16:11 Yohh