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