search

chatscope / chat-ui-kit-react

Build your own chat UI with React components in few minutes. Chat UI Kit from chatscope is an open source UI toolkit for developing web chat applications.
https://chatscope.io
MIT License
1.34k stars 116 forks source link

MessageInput on Firefox appends `<br>` #91

Closed philipmw closed 1 year ago

philipmw commented 1 year ago

When I use chat-ui-kit-react version 1.10.1 in a basic app, the input works fine on Chrome, but on Firefox, it reliably adds <br> to my every input message. This happens both when I press Enter into the input box and when I click the Send button with the mouse.

For example, if I submit "hello world", on Firefox the send-message callback receives hello world<br> string. On Chrome, it is hello world as expected.

iocuydi commented 1 year ago

I was running into something similar, I was taking the first arg passed back by the MessageInput onChange component, and using that as the message. I found that actually, the MessageInput passes back multiple arguments and the first one is HTML, which will often have tags and such.

https://github.com/chatscope/chat-ui-kit-react/blob/170191a5f6d0d3190493b08c309cb0fca237f5ca/src/components/MessageInput/MessageInput.jsx#L174

My solution was to maintain two state variables, one to hold the HTML to render the content of the message input (innerHTML, from above link), the other to actually send for the message with onSend (innerText, from above link).

Not 100% sure about the difference between these 3, but it seems that only innerText will maintain the correct formatting for the sent message, and only innerHTML will maintain the correct formatting for what should render in the MessageInput.

chaoran-chen commented 1 year ago

I observe the same error as well. I use onChange() and store textContent in a state which gets passed back into value, and in Chrome, the user has to type twice to get a space.

supersnager commented 1 year ago

@philipmw Editable field in the <Messageinput /> component is a <div contenteditable />.

Unfortunately, the handling of contenteditable varies from browser to browser. So adding <br /> is a normal Firefox behavior, and you need to handle it by yourself.

As @iocuydi said you can use all parameters of the onChange method depending on your needs.

onChange gives you access to the following parameters which are the properties of the inner contenteditable div:

innerHTML - https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML, textContent - https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent, innerText - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText, childNodes - https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes.

Also note that childNodes contains cloned childNodes of the div: https://github.com/chatscope/chat-ui-kit-react/blob/170191a5f6d0d3190493b08c309cb0fca237f5ca/src/components/MessageInput/MessageInput.jsx#L129

so if you manipulate these nodes the changes will not reflect in the UI.

Please check the links to the MDN for a detailed explanation of each of the parameters.