[Bug] PasswordInput - onTogglePasswordVisibility handler returns multiple elements

[silvaDominic]

What package(s) are you using?

(This is a native Carbon component)

• Carbon for IBM Products (or Carbon for IBM Cloud & Cognitive)
• Legacy/CDAI
• Legacy/Security

Detailed description

Describe in detail the issue you're having.

The onTogglePasswordVisibility handler is returning the exact element being clicked on rather than just the button or some other useful state object/prop.

Is this issue related to a specific component?

PasswordInput
packages/react/src/components/TextInput/PasswordInput.tsx

What did you expect to happen?

Expected to receive just the button element.

The doc comment and return type for the prop seems to indicate it should just be button:

  /**
   * Callback function that is called whenever the toggle password visibility button is clicked
   * @param evt Mouse event triggered by the password visibility `<button>`
   * @returns {void}
   */
  onTogglePasswordVisibility?: (
    evt: React.MouseEvent<HTMLButtonElement>
  ) => void;

What happened instead?

Exact element clicked is returned (e.g. svg, path, button).

What would you like to see changed?

It's not clear what the utility of receiving any click event is here (What would a user do with this information?). Personally, I thought it would give me the ability to override the default behavior which simply toggles the input type. Perhaps receiving the current input type would be passed back. Example:

<TextInput.PasswordInput
...
onTogglePasswordVisibility={(inputType) => myCustomHandler(inputType)}
...
...
/>

What browser are you working in?

FF/Chrome

What version of the @carbon/ibm-products (or @carbon/ibm-cloud-cognitive) package are you using?

Carbon v11.48.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Turbonomic

Steps to reproduce the issue/Reduced test case:

Add this line:
onTogglePasswordVisibility={(e) => console.log(e.target)} // <--- This line

to the TogglePasswordVisibility component in the story:
packages/react/src/components/TextInput/TextInput.stories.js

Like so:

export const TogglePasswordVisibility = () => {
  return (
    <TextInput.PasswordInput
      id="text-input-1"
      labelText="Text input label"
      helperText="Optional help text"
      autoComplete="true"
      onTogglePasswordVisibility={(e) => console.log(e.target)} // <--- This line
    />
  );
};

Check the console and click on various spots on the visibility toggle. Observe the behavior as shown in video below.

Additional information

Screen.Recording.2024-01-24.at.2.06.51.PM.mov

[silvaDominic]

Closing issue as I accidentally opened this issue under the IBM-Products repo.

Opened same issue in Carbon project: carbon-design-system/carbon#15600