diff --git a/packages/listbox/src/machine.ts b/packages/listbox/src/machine.ts index 7fd84af75..e525efb90 100644 --- a/packages/listbox/src/machine.ts +++ b/packages/listbox/src/machine.ts @@ -228,7 +228,9 @@ function submitForm(data: ListboxStateData, event: any) { // sucker. let { hiddenInput } = event.refs; if (hiddenInput && hiddenInput.form) { - let submitButton = hiddenInput.form.querySelector("button,[type='submit']"); + let submitButton = hiddenInput.form.querySelector( + "button:not([type]),[type='submit']" + ); submitButton && (submitButton as any).click(); } } diff --git a/packages/tabs/__tests__/tabs.test.tsx b/packages/tabs/__tests__/tabs.test.tsx index c5b2f5a4c..58349c079 100644 --- a/packages/tabs/__tests__/tabs.test.tsx +++ b/packages/tabs/__tests__/tabs.test.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { render, fireEvent } from "$test/utils"; +import { render, fireEvent, userEvent } from "$test/utils"; import styled from "styled-components"; import { Tabs, @@ -464,7 +464,7 @@ describe("", () => { }); it("focuses the correct tab with manual keyboard navigation", () => { - const { getByRole } = render( + const { getByRole, getByText } = render(
@@ -491,10 +491,31 @@ describe("", () => { expect(tabList).toBeTruthy(); - // TODO: Fails, but works in the browser. Figure out why and fix it. - // fireEvent.click(getByText("Tab 1")); - // fireEvent.keyDown(tabList, { key: "ArrowRight", code: 39 }); - // expect(getByText("Tab 2")).toHaveFocus(); + userEvent.click(getByText("Tab 1")); + + fireEvent.keyDown(tabList, { key: "ArrowRight", code: 39 }); + expect(getByText("Tab 2")).toHaveFocus(); + expect(getByText("Panel 1")).toBeVisible(); + expect(getByText("Panel 2")).not.toBeVisible(); + + fireEvent.keyDown(tabList, { key: "ArrowRight", code: 39 }); + expect(getByText("Tab 3")).toHaveFocus(); + + fireEvent.keyDown(tabList, { key: "ArrowRight", code: 39 }); + expect(getByText("Tab 1")).toHaveFocus(); + + fireEvent.keyDown(tabList, { key: "ArrowLeft", code: 37 }); + expect(getByText("Tab 3")).toHaveFocus(); + + fireEvent.keyDown(tabList, { key: "ArrowLeft", code: 37 }); + fireEvent.keyDown(tabList, { key: "ArrowLeft", code: 37 }); + expect(getByText("Tab 1")).toHaveFocus(); + + fireEvent.keyDown(tabList, { key: "End", code: 35 }); + expect(getByText("Tab 3")).toHaveFocus(); + + fireEvent.keyDown(tabList, { key: "Home", code: 36 }); + expect(getByText("Tab 1")).toHaveFocus(); }); it("correctly calls focus and blur events on Tab component", () => { diff --git a/website/src/pages/alert-dialog.mdx b/website/src/pages/alert-dialog.mdx index 36a895655..46cfc7552 100644 --- a/website/src/pages/alert-dialog.mdx +++ b/website/src/pages/alert-dialog.mdx @@ -11,7 +11,7 @@ import { TOC, TOCList, TOCLink } from "../components/TOC"; AlertDialog - AlertDialogContent + AlertDialogLabel AlertDialogDescription AlertDialogOverlay AlertDialogContent diff --git a/website/src/pages/checkbox.mdx b/website/src/pages/checkbox.mdx index a025284ec..de95b1609 100644 --- a/website/src/pages/checkbox.mdx +++ b/website/src/pages/checkbox.mdx @@ -431,7 +431,7 @@ Please see the [styling guide](/styling). | [`disabled`](#customcheckbox-disabled) | `boolean` | false | | [`name`](#customcheckbox-name) | `string` | false | | [`onChange`](#customcheckbox-onchange) | `func` | false | -| [`value`](#customcheckbox-value) | `string | number` | false | +| [`value`](#customcheckbox-value) | `string \| number` | false | ##### CustomCheckbox `span` props