diff --git a/packages/mentis/src/components/MentionInput.tsx b/packages/mentis/src/components/MentionInput.tsx index 14c8b73..fa636cc 100644 --- a/packages/mentis/src/components/MentionInput.tsx +++ b/packages/mentis/src/components/MentionInput.tsx @@ -15,6 +15,11 @@ export const MentionInput: React.FC = ({ onChange, onKeyDown, }) => { + // Get the custom placeholder or fall back to default + const placeholder = + slotsProps?.contentEditable?.["data-placeholder"] || + `Type ${trigger} to mention someone`; + const { editorRef, showModal, @@ -42,7 +47,7 @@ export const MentionInput: React.FC = ({ return (
{ // Update to a value with mentions rerender( - + ); editorElement = screen.getByRole("combobox"); expect(editorElement).toHaveTextContent("Hello @john, how are you?"); @@ -152,4 +155,42 @@ describe("Input props", () => { customPlaceholder ); }); + + test("Placeholder should reappear after content is added and then removed", async () => { + const customPlaceholder = "Type your message here..."; + const { rerender } = render( + + ); + + const user = userEvent.setup(); + const editorElement = screen.getByRole("combobox"); + + // Add some content + await user.type(editorElement, "Hello world"); + expect(editorElement).toHaveTextContent("Hello world"); + + // Clear the content by setting displayValue to empty string + rerender( + + ); + + // Element should be empty and placeholder should be visible via CSS + expect(editorElement).toHaveTextContent(""); + expect(editorElement.innerHTML).toBe(""); + }); });