[joy-ui][Autocomplete] Add type=button to clear button

[brijeshb42]

Closes #39262

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-39263--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against fff029f

[oliviertassinari]

I don't really see it fixing the root problem:

• IconButton in Joy UI doesn't set the default type, comparing the two https://codesandbox.io/s/loving-frost-znlnvy?file=/Demo.tsx

import * as React from "react";
import Box from "@mui/joy/Box";
import OpenInNew from "@mui/icons-material/OpenInNew";
import IconButtonJoy from "@mui/joy/IconButton";
import IconButtonMd from "@mui/material/IconButton";
import { CssVarsProvider } from "@mui/joy/styles";

export default function ButtonLink() {
  return (
    <Box sx={{ display: "flex", gap: 2, alignItems: "center" }}>
      <CssVarsProvider>
        <IconButtonJoy type={undefined}>
          <OpenInNew />
        </IconButtonJoy>
      </CssVarsProvider>
      <IconButtonMd type={undefined}>
        <OpenInNew />
      </IconButtonMd>
    </Box>
  );
}

Solved with?

diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
index 8a169ab2d4..e876549638 100644
--- a/packages/mui-joy/src/IconButton/IconButton.tsx
+++ b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -138,6 +138,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) {
     size: sizeProp = 'md',
     slots = {},
     slotProps = {},
+    type,
     ...other
   } = props;
   const buttonGroup = React.useContext(ButtonGroupContext);

• useAutocomplete doesn't set the type="button". Maybe but not sure, it could mess stuff up if developers are using role="button".

diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.js
index f81827e684..524ebdf1af 100644
--- a/packages/mui-base/src/useAutocomplete/useAutocomplete.js
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.js
@@ -1131,10 +1131,12 @@ export function useAutocomplete(props) {
       disabled: disabledProp,
     }),
     getClearProps: () => ({
+      type: 'button',
       tabIndex: -1,
       onClick: handleClear,
     }),
     getPopupIndicatorProps: () => ({
+      type: 'button',
       tabIndex: -1,
       onClick: handlePopupIndicator,
     }),

[brijeshb42]

Looking at the implementation, the actual IconButton uses useButton which in turn sets the type as button if not specified by the user. But in case of Autocomplete, it imports StyledIconButton that only applies the style and not IconButton that uses the useButton.

As per your comment, the 2nd one makes most sense as it'll apply the fix to all present and future components using useAutocomplete. And, although they can, but I doubt people will want to mess with the default a11y features by providing a non button element with role button.

[siriwatknp]

👍 Thanks for the fix!