Bullet list firefox issue
xitanggg opened this issue · comments
Documenting a feedback
One thing I noticed was the really weird (I am on Firefox) : When I tried to enter text in the additional box and bullet points were activated it would create a bullet point after every space I pressed....
Hey great tool. Can confirm I also have this issue on Firefox Desktop 114.0.2 (64-bit)
Up!
In bullet point sections, after the first word and a space, every letter goes to a new bullet point:
It's fine in Chrome though.
Apologize for this bug, I will prioritize fixing this issue early this week
Please don't apologize, we appreciate your work and your time.
Feels like there is some kind of counter issue? You can eventually get the text (full phrase) fit for the one bullet if you play around enough with spaces and backspace.
Can confirm this happens on Safafi Version 16.5 (18615.2.9.11.4) as well.
I am facing this issue as well. I just checked right now.
Just adding a space enters a new line, and then from then on, every keystroke creates a new line (or a new entry in the bullet list).
Just got a chance to take a closer look at the issue. BulletListTextarea is the component to manage the descriptions input. It is essentially a content editable div and uses innerText to set what user enters. A weird thing about Firefox is that if it is at the end of the line and user presses space, innerText appends a new line character instead of appending a space as in other browser (Chrome, Edge).
It is not as a simple fix as I would have previously thought. I just created an issue with Firefox on webcompat/web-bugs#124217 to learn more about why innerText behaves such a way 🤔
To reproduce this issue:
- Visit the codesandbox debug setup created https://codesandbox.io/s/contenteditable-innertext-debug-kf5psc?file=/src/index.js
- Open Console in codesandox
- Enter b in the textbox, observe it prints "ab"
- Enter space in the textbox, observe it prints "ab" follow by a new line (in Firefox) instead of "ab " (in Chrome, Edge)
What happens using innerHTML?
Thanks all for reporting this issue! I just created and released a fallback component BulletListTextareaFallback for Firefox and Safari as a workaround solution. Can anyone help test it on their end and confirm if it indeed solves the issue?
The fallback component should work fine most of the case. There is a small edgecase I notice where it would refocus to the end if you have say 2 bullet points, and you try to backspace/remove the second bullet point to combine it with the first one. Hopefully this isn't common to run into.
I initially created a custom BulletListTextarea component since I want the output to be an array of string type descriptions: sting [] given that is the input format consumed by the react pdf render to render the description list. I used innerText since it would be easier to serialize and deserialize things by splitting the string by new line. Using innerHTML might require more work to split by <div> <br> and we might go into the same problem, as I notice Firefox adds a <br> in innerHTML if user adds a space at the end of the line.
A lesson learned is that each browser handles innerText and innerHTML very differently, and it can be risky to rely on them.
Seems to work fine now on Firefox and Safari . Thank you .
Thanks @williamtwild for confirming! Closing this issue for now given that the fallback component seems to work fine.