Chat custom message input doesn't work

Progress® KendoReact Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 27 Apr 2021 10:42 by ADMIN

Aske Hippe

Created on: 19 Dec 2020 16:57

Type: Bug Report

Chat custom message input doesn't work

Hi there!

I've written this component for a custom message input box for the Chat in Conversational UI for React:

import { ChatMessageBoxProps } from '@progress/kendo-react-conversational-ui'
import { FC } from 'react'

const CustomChatMessageBox: FC<ChatMessageBoxProps> = (props) => {
  return (
		<>
			<input
				type="text"
				name="message"
				className="h-full w-full text-base md:text-sm focus:outline-none"
			/>
			{props.sendButton}
		</>
  )
}

export default CustomChatMessageBox

I'm supplying this component to the `messageBox` prop of the Chat component. However, sending the message doesn't work; neither by pressing enter or pressing the send button. If I replace the input with props.messageInput, it works.

Any help in fixing this will be greatly appreciated!

Thank in advance :-)

1 comment

ADMIN

Stefan

Posted on: 24 Dec 2020 11:49

Hello, Aske Hippe,

Thank you for the code.

This occurs as the built-in input is internally connected with the component and the send button take its value using the ref. When the component is different the send button (and Enter) have no direct connection with the Input to take the value.

When the input will be changed, this will require using a custom button as well which will take the value of the input.

I made an example showcasing how to use a custom input with a custom button:

https://stackblitz.com/edit/react-e6ujen-igh6o8?file=app/main.jsx

Directly using props.messageInput or messageButton is recomended only when adding extra elements and wanting to keep the built-in ones. If one of then have to be replaced, the other has to be replaced as well.

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/.