No way to disable *Trigger components without disabling the trigger.

[kylemh]

Provide your feedback here.

I want to be able to visually and functionally disable a button without preventing it from being focusable.

🔦 Context

Some helpful context in here: #8687

My goal is to allow buttons to never be disabled and - through required props - force developers to create disabled buttons that automatically provide reason feedback to touch, pointer, and assistive tech users. Specificaly, we conditionally fire a Toast using const isCoarsePointer = useMediaQuery('(pointer: coarse)'); and show a Tooltip for non-touch devices.

💻 Code Sample

I was hoping I could so something like this:

<Button
  isDisabled={false}
  aria-disabled={isDisabled || isLoading}
  onPress={(e) => {
    if (isDisabled || isLoading) {
      e.preventDefault(); // i know this doesn't exist
    }
  }}
>

but you cant prevent default of onPress.

Then I tried:

<Pressable isDisabled={isDisabled || isLoading}>
  <button {...myButtonComponentProps} disabled={false} aria-disabled={isDisabled || isLoading} />
</Pressable>

but with this setup Tooltips don't seem to trigger on focus.

In #8687, I was extremely happy to see aria-disabled get propogated, but it seems it's not all I'll need, unless there's some other way for me to accomplish my goals?

Version

1.1.13

What browsers are you seeing the problem on?

Chrome

If other, please specify

No response

What operating system are you using?

MacOS

[snowystinger]

Given that you have an isLoading state, maybe https://react-spectrum.adobe.com/react-aria/Button.html#pending would be the most useful thing to use?

Otherwise, if you're creating a Button you can wrap it however you like.

function MyButton(props) {
  return <Button onPress={props.isDisabled ? undefined : props.onPress} ...
}
// or to show a toast
function MyButton(props) {
  return <Button onPress={props.isDisabled ? showToast : props.onPress} ...
}

To stop the event chain, you need to start by preventing default in press start. We use a few different events to arrive at onPress, it's not just onClick. See https://react-spectrum.adobe.com/blog/building-a-button-part-1.html for more information.

[kylemh]

I've got two issues:

1. It doesn't look like it's possible to preventDefault from onPressStart since it's not a valid property on the event.
2. I'm expecting users to pass onClick, not onPress. Even if I do the following, when a Button (with isDisabled set to true) is used as a DialogTrigger or PopoverTrigger, the triggers function and I'd expect them not to:

<ReactAriaComponentsButton
   {...myButtonProps
   onPress={undefined}
   onPressStart={undefined}
   onPressChange={undefined}
   onPressEnd={undefined}
   onPressUp={undefined}
   onClick={(e) => {
     if (isDisabled || isLoading) {
       e.preventDefault();
     } else {
       props?.onClick?.(e);
     }
   }}
/>

---

I'm aware of isPending, but I've got a stricter holdover from before the prop existed:

interface LoadingProp<T extends string> {
  /**
   * @see https://adrianroselli.com/2021/01/multi-function-button.html
   */
  loading?: {
    /**
     * We're required to render text to explain the loading state to non-seeing users. You can
     * make this text invisible to seeing eye users with the `isTextVisible` property.
     */
    text: NonEmptyString<T>;

    /**
     * This is for if you want the loading.text to be visualy rendered with a prefixed, inline
     * spinner. No purpose with IconButton.
     * @default false
     */
    isTextVisible?: boolean;

    isActive: boolean;
  };
}

we use the content to render a sibling sr-only output element with the loading text and also we do work to make sure the button width is the same in loading vs. non-loading state to avoid layout shift between state changes.

[kylemh]

I think I see that my post is a bit confusing. The MyButton component works in isolation, but if - for example - it's used within a MenuTrigger, then the fact that MyButton has isDisabled is irrelevant to the MenuTrigger.

Example here: https://codesandbox.io/p/devbox/vite-react-twcssv4-rac-forked-ks8jcd