Conversational ui multiline input

Matej

Posted on: 14 Jan 2021 13:22

Thank you

ADMIN

Stefan

Posted on: 14 Jan 2021 11:42

Hello, Matej,

Regarding the questions:

1) The TextArea component can be used, but it will require using a custom send button as well as they are not connected. The standard textarea element can be connected via the ref, but as the TextArea is a custom component the ref structure is different.

2) This is because the component listens for onKeyDown for keyboard navigation. This can be prevented if needed:

  componentDidMount(){
    let element = document.querySelector('.k-message-box').addEventListener('keydown', (e) => {
      e.stopPropagation();
    })
  }

This is the updated example:

https://stackblitz.com/edit/react-iygvgu-sxwkpm?file=app%2Fmain.jsx

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Matej

Posted on: 13 Jan 2021 07:47

1. How can I connect the kendo TextArea with a "messageProps" internal state? Here is an example https://stackblitz.com/edit/react-yt9tuu

2 .I was able to do it with a regular textarea here https://stackblitz.com/edit/react-iygvgu but now I have a different problem. Write text with a multiple new lines to the textarea and press arrow up. The cursor will not go 1 row up as in a regular textarea but the focus will jump to the last text bubble.

ADMIN

Stefan

Posted on: 11 Dec 2020 09:08

Hello, Matej,

This can be currently done using the messageBox props are rendering a TextArea component instead of the Input:

https://www.telerik.com/kendo-react-ui/components/conversationalui/custom-rendering/#toc-setting-custom-behavior

https://www.telerik.com/kendo-react-ui/components/inputs/textarea/

The TextArea has an autoSize prop to allow automatically adding new lines based on the user input:

https://www.telerik.com/kendo-react-ui/components/inputs/api/TextAreaProps/#toc-autosize

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.