Update empty message combobox site example (#3640)

packages/core/src/__tests__/__e2e__/combo-box/ComboBox.cy.tsx

@@ -531,11 +531,10 @@ describe("Given a ComboBox", () => {
   it("should allow showing an empty message when there are no options", () => {
     cy.mount(<EmptyMessage />);
     cy.findByRole("combobox").realClick();
-    cy.realType("Missing");
     cy.findAllByRole("option").should("have.length", 1);
     cy.findByRole("option").should(
       "have.text",
-      `No results found for "Missing"`
+      `No results found for "Yelloww"`
     );
   });
 

packages/core/stories/combo-box/combo-box.stories.tsx

@@ -584,7 +584,9 @@ export const LongList: StoryFn<ComboBoxProps<CountryCode>> = (args) => {
 };
 
 export const EmptyMessage: StoryFn<ComboBoxProps> = (args) => {
-  const [value, setValue] = useState(args.defaultValue?.toString() ?? "");
+  const [value, setValue] = useState(
+    args.defaultValue?.toString() ?? "Yelloww"
+  );
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     // React 16 backwards compatibility

site/docs/components/combo-box/examples.mdx

@@ -112,7 +112,7 @@ Wrap options in a `OptionGroup` component to group them together. Use the `label
 
 ## Empty message
 
-Use the `Option` component to display a message when there are no options available.
+To display a message when there are no options available, pass your message as a child element with `role="option"`.
 
 </LivePreview>
 

site/src/examples/combo-box/EmptyMessage.tsx

@@ -4,7 +4,7 @@ import { shortColorData } from "./exampleData";
 import styles from "./index.module.css";
 
 export const EmptyMessage = (): ReactElement => {
-  const [value, setValue] = useState("");
+  const [value, setValue] = useState("Yelloww");
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;