fix(web-components): various field interaction bugs and storybook inconsistencies (#34555)

Author: radium-v

change/@fluentui-web-components-38d53efd-f861-4348-a7e2-a188c6aff3ed.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: various field interaction bugs",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/web-components.api.md

@@ -673,6 +673,10 @@ export class BaseField extends FASTElement {
     changeHandler(e: Event): boolean | void;
     // @internal
     clickHandler(e: MouseEvent): boolean | void;
+    // (undocumented)
+    connectedCallback(): void;
+    // (undocumented)
+    disconnectedCallback(): void;
     // @internal
     elementInternals: ElementInternals;
     // @internal

packages/web-components/src/button/button.base.ts

@@ -395,7 +395,7 @@ export class BaseButton extends FASTElement {
       !this.name &&
       !this.formAction &&
       !this.formEnctype &&
-      !this.form &&
+      !this.formAttribute &&
       !this.formMethod &&
       !this.formNoValidate &&
       !this.formTarget

packages/web-components/src/checkbox/checkbox.base.ts

@@ -131,6 +131,15 @@ export class BaseCheckbox extends FASTElement {
     this._value = next;
   }
 
+  /**
+   * Tracks whether the space key was pressed down while the checkbox was focused.
+   * This is used to prevent inadvertently checking a required, unchecked checkbox when the space key is pressed on a
+   * submit button and field validation is triggered.
+   *
+   * @internal
+   */
+  private _keydownPressed: boolean = false;
+
   /**
    * The name of the element. This element's value will be surfaced during form submission under the provided name.
    *
@@ -352,7 +361,8 @@ export class BaseCheckbox extends FASTElement {
   }
 
   /**
-   * Prevents scrolling when the user presses the space key.
+   * Prevents scrolling when the user presses the space key, and sets a flag to indicate that the space key was pressed
+   * down while the checkbox was focused.
    *
    * @param e - the event object
    * @internal
@@ -361,6 +371,8 @@ export class BaseCheckbox extends FASTElement {
     if (e.key !== ' ') {
       return true;
     }
+
+    this._keydownPressed = true;
   }
 
   /**
@@ -370,10 +382,11 @@ export class BaseCheckbox extends FASTElement {
    * @internal
    */
   public keyupHandler(e: KeyboardEvent): boolean | void {
-    if (e.key !== ' ') {
+    if (!this._keydownPressed || e.key !== ' ') {
       return true;
     }
 
+    this._keydownPressed = false;
     this.click();
   }
 

packages/web-components/src/checkbox/checkbox.spec.ts

@@ -5,6 +5,7 @@ import { CheckboxShape, CheckboxSize } from './checkbox.options.js';
 test.describe('Checkbox', () => {
   test.use({
     tagName: 'fluent-checkbox',
+    waitFor: ['fluent-button'],
   });
 
   test('should have a role of `checkbox`', async ({ fastPage }) => {
@@ -350,4 +351,33 @@ test.describe('Checkbox', () => {
 
     await expect(page).toHaveURL(/\?checkbox=foo&checkbox=bar/);
   });
+
+  test('should not change the checkedness when the form is submitted and the checkbox is invalid (required and unchecked)', async ({
+    fastPage,
+    page,
+  }) => {
+    const { element } = fastPage;
+    const submitButton = page.locator('fluent-button');
+
+    await fastPage.setTemplate(/* html */ `
+      <form>
+        <label for="checkbox">Checkbox</label>
+        <fluent-checkbox required name="checkbox" id="checkbox"></fluent-checkbox>
+        <fluent-button type="submit">submit</fluent-button>
+      </form>
+    `);
+
+    await expect(element).toHaveJSProperty('checked', false);
+    await expect(element).toHaveJSProperty('validity.valueMissing', true);
+
+    await submitButton.focus();
+
+    await expect(submitButton).toBeFocused();
+
+    await page.keyboard.down(' ');
+
+    await page.keyboard.up(' ');
+
+    await expect(element).toHaveJSProperty('checked', false);
+  });
 });

packages/web-components/src/checkbox/checkbox.stories.ts

@@ -1,6 +1,6 @@
-import { html, repeat } from '@microsoft/fast-element';
+import { html, ref, repeat } from '@microsoft/fast-element';
 import { uniqueId } from '@microsoft/fast-web-utilities';
-import { LabelPosition, ValidationFlags } from '../field/field.options.js';
+import { LabelPosition } from '../field/field.options.js';
 import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Checkbox as FluentCheckbox } from './checkbox.js';
 import { CheckboxShape, CheckboxSize } from './checkbox.options.js';
@@ -18,6 +18,7 @@ const storyTemplate = html<StoryArgs<FluentCheckbox>>`
     shape="${story => story.shape}"
     size="${story => story.size}"
     slot="${story => story.slot}"
+    ${ref('checkbox')}
   >
     ${story => story.checkedIndicatorContent?.()} ${story => story.indeterminateIndicatorContent?.()}
   </fluent-checkbox>
@@ -123,7 +124,7 @@ export default {
 export const Default: Story = {};
 
 export const Checkbox: Story = {
-  render: renderComponent(storyTemplate).bind({}),
+  render: renderComponent(storyTemplate),
   args: {
     id: uniqueId('checkbox-'),
   },
@@ -132,7 +133,7 @@ export const Checkbox: Story = {
 export const Checked: Story = {
   render: renderComponent(html<StoryArgs<FluentCheckbox>>`
     ${repeat(story => story.storyContent, html<StoryArgs<FluentCheckbox>>`${fieldStoryTemplate}<br />`)}
-  `).bind({}),
+  `),
   args: {
     storyContent: [
       {
@@ -159,7 +160,7 @@ export const Checked: Story = {
 export const Indeterminate: Story = {
   render: renderComponent(html<StoryArgs<FluentCheckbox>>`
     ${repeat(story => story.storyContent, html<StoryArgs<FluentCheckbox>>`${fieldStoryTemplate}<br />`)}
-  `).bind({}),
+  `),
   args: {
     storyContent: [
       {
@@ -186,7 +187,7 @@ export const Indeterminate: Story = {
 export const Disabled: Story = {
   render: renderComponent(html<StoryArgs<FluentCheckbox>>`
     ${repeat(story => story.storyContent, html<StoryArgs<FluentCheckbox>>`${fieldStoryTemplate}<br />`)}
-  `).bind({}),
+  `),
   args: {
     storyContent: [
       {
@@ -250,30 +251,33 @@ export const Disabled: Story = {
 
 export const Required: Story = {
   render: renderComponent(html<StoryArgs<FluentCheckbox>>`
-    <form style="display: inline-flex; gap: 1em; align-items: baseline">
+    <form
+      @reset="${story => story.successMessage.toggleAttribute('hidden', true)}"
+      @submit="${story => story.checkbox.checkValidity() && story.successMessage.toggleAttribute('hidden', false)}"
+      style="display: inline-flex; flex-direction: column; gap: 1rem; max-width: 400px;"
+    >
+      ${fieldStoryTemplate}
       <div>
-        <fluent-checkbox id="required-fluent-checkbox" required></fluent-checkbox>
-        <label for="required-fluent-checkbox">Required</label>
+        <fluent-button type="submit">Submit</fluent-button>
+        <fluent-button type="reset">Reset</fluent-button>
       </div>
-      ${fieldStoryTemplate}
-      <fluent-button type="submit">Submit</fluent-button>
+      <fluent-text ${ref('successMessage')} hidden>Form submitted successfully!</fluent-text>
     </form>
-  `).bind({}),
+  `),
   args: {
     storyContent: storyTemplate,
     slot: 'input',
     labelPosition: LabelPosition.after,
     id: uniqueId('checkbox-'),
     required: true,
-    label: 'Required',
-    messages: [{ message: 'This field is required', flag: ValidationFlags.valueMissing }],
+    label: 'Check this to submit the form',
   },
 };
 
 export const Large: Story = {
   render: renderComponent(html<StoryArgs<FluentCheckbox>>`
     ${repeat(story => story.storyContent, html<StoryArgs<FluentCheckbox>>`${fieldStoryTemplate}<br />`)}
-  `).bind({}),
+  `),
   args: {
     storyContent: [
       {
@@ -317,7 +321,7 @@ export const Large: Story = {
 };
 
 export const LabelBefore: Story = {
-  render: renderComponent(fieldStoryTemplate).bind({}),
+  render: renderComponent(fieldStoryTemplate),
   args: {
     storyContent: storyTemplate,
     id: uniqueId('checkbox-'),
@@ -328,7 +332,7 @@ export const LabelBefore: Story = {
 };
 
 export const LabelWrapping: Story = {
-  render: renderComponent(fieldStoryTemplate).bind({}),
+  render: renderComponent(fieldStoryTemplate),
   args: {
     storyContent: storyTemplate,
     id: uniqueId('checkbox-'),
@@ -348,7 +352,7 @@ export const LabelWrapping: Story = {
 export const Circular: Story = {
   render: renderComponent(html<StoryArgs<FluentCheckbox>>`
     ${repeat(story => story.storyContent, html<StoryArgs<FluentCheckbox>>`${fieldStoryTemplate}<br />`)}
-  `).bind({}),
+  `),
   args: {
     storyContent: [
       {

packages/web-components/src/field/field.base.ts

@@ -47,13 +47,6 @@ export class BaseField extends FASTElement {
    */
   public messageSlotChanged(prev: Element[], next: Element[]) {
     toggleState(this.elementInternals, 'has-message', !!next.length);
-
-    if (!next.length) {
-      this.removeEventListener('invalid', this.invalidHandler, { capture: true });
-      return;
-    }
-
-    this.addEventListener('invalid', this.invalidHandler, { capture: true });
   }
 
   /**
@@ -140,6 +133,16 @@ export class BaseField extends FASTElement {
     this.elementInternals.role = 'presentation';
   }
 
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener('invalid', this.invalidHandler, { capture: true });
+  }
+
+  disconnectedCallback(): void {
+    this.removeEventListener('invalid', this.invalidHandler, { capture: true });
+    super.disconnectedCallback();
+  }
+
   /**
    * Applies the `focus-visible` state to the element when the slotted input receives visible focus.
    *