<IxButton> is behaving different to <button>

[soundararaj-gayathri]

What happened?

With the latest release 1.6.2, we are observing that 'Enter' keypress is not working when the form includes IxButton. The same form component with button, works as expected. Our dependencies "@siemens/ix-react": "^1.6.2", "@siemens/ix": "^1.6.2", "@siemens/ix-aggrid": "^1.6.2", "@siemens/ix-brand-theme": "^1.2.0", "@siemens/ix-icons": "^1.1.2", "react-hook-form": "^7.43.9",

What type of frontend frameware are you seeing the problem on?

React

Which version of iX do you use?

v.1.6.2

Code to produce this issue.

Sample form validation code provided for React on
https://ix.siemens.io/docs/controls/validation
Replacing the button with IxButton does not behave as expected when 'Enter' key is pressed.

/*
 * COPYRIGHT (c) Siemens AG
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { IxValidationTooltip } from '@siemens/ix-react';
import React, { useState } from 'react';
import { useForm } from 'react-hook-form';

export default () => {
  const [wasValidated, setValidation] = useState(false);
  const { register, handleSubmit, formState } = useForm({
    defaultValues: {
      firstName: '',
      lastName: '',
      userName: '',
    },
  });

  const onSubmit = (data: any) => {
    console.log(data);
    setValidation(true);
  };

  return (
    <>
      <form
        className={`row g-3 needs-validation`}
        noValidate
        onSubmit={handleSubmit(onSubmit)}
      >
        <div className="col-md-4">
          <label htmlFor="validationCustom01" className="form-label">
            First name
          </label>
          <input
            type="text"
            className={`form-control ${
              formState.errors.firstName ? 'is-invalid' : ''
            }`}
            id="validationCustom01"
            {...register('firstName', {
              required: true,
            })}
          />
          <div className="valid-feedback">Looks good!</div>
        </div>
        <div className="col-md-4">
          <IxValidationTooltip message="Error hint textError hint textError hint textError hint textError hint textError hint textError hint textError hint textError hint text">
            <label htmlFor="validationCustom02" className="form-label">
              Last name
            </label>
            <input
              type="text"
              className={`form-control ${
                formState.errors.lastName ? 'is-invalid' : ''
              }`}
              id="validationCustom02"
              {...register('lastName', {
                required: true,
              })}
            />
          </IxValidationTooltip>
          <div className="valid-feedback">Looks good!</div>
        </div>
        <div className="col-md-4">
          <label htmlFor="validationCustomUsername" className="form-label">
            Username
          </label>
          <input
            type="text"
            className={`form-control ${
              formState.errors.userName ? 'is-invalid' : ''
            }`}
            id="validationCustomUsername"
            aria-describedby="inputGroupPrepend"
            {...register('userName', {
              required: true,
            })}
          />
          <div className="invalid-feedback">Please choose a username.</div>
        </div>
        <div className="col-12">
          <IxButton className="btn btn-primary" type="submit">
            Submit form
          </IxButton>
        </div>
      </form>
    </>
  );
};

[danielleroux]

shadow DOM prevent event bubbling in this case the submit event will not be pass through the hosting component.

Current workaround if you need to update to 1.6.2 you can submit the form by onClick of the button.

https://github.com/ionic-team/stencil/issues/2284

[soundararaj-gayathri]

shadow DOM prevent event bubbling in this case the submit event will not be pass through the hosting component.

Current workaround if you need to update to 1.6.2 you can submit the form by onClick of the button.

ionic-team/stencil#2284

@danielleroux It is just not the button on click which we would need. We would need 'Enter' key press to allow users to navigate between form elements when the form element has valid input in it. Also 'Enter' key press should submit the form too. This was working on 1.5.0 and after migration has stopped working on 1.6.2