bug: 8.2.7 to 8.2.8 ion-input autofocus renamed autoFocus

[ptmkenny]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

Ionic React, updated from 8.2.7 to 8.2.8. Rebuilt my app and received the following error:

src/components/ionHOC/ControllerTextarea.tsx:55:9 - error TS2322: Type '{ className: string; label: string; labelPlacement: "stacked" | "floating"; name: TextareaNameAttribute; value: string; onIonBlur: Noop; onIonChange: (event: IonTextareaCustomEvent<...>) => void; ... 4 more ...; clearOnEdit: false; }' is not assignable to type 'IntrinsicAttributes & Omit<HTMLAttributes<IonTextarea>, "value" | "fill" | "name" | "label" | "placeholder" | "mode" | ... 22 more ... | "wrap"> & EventListeners<...> & Partial<...> & RefAttributes<...>'.
  Property 'autofocus' does not exist on type 'IntrinsicAttributes & Omit<HTMLAttributes<IonTextarea>, "value" | "fill" | "name" | "label" | "placeholder" | "mode" | ... 22 more ... | "wrap"> & EventListeners<...> & Partial<...> & RefAttributes<...>'. Did you mean 'autoFocus'?

55         autofocus={autofocus}
           ~~~~~~~~~

The component in question is a higher order component that wraps ion-textarea.

It wants me to use autoFocus instead of autofocus for ion-textarea, but that is not what the docs say (they refer to autofocus). Furthermore, this change only seems to affect ion-textarea, and not ion-input (for ion-input, autofocus is still allowed, and autoFocus generates an error.

The error also occurs on 8.3.0. Reverting to 8.2.7 removes the error.

Expected Behavior

I expect to have no errors.

Steps to Reproduce

Component with the issue:

import React from 'react';
import { IonTextarea } from '@ionic/react';
import type { TextareaChangeEventDetail } from '@ionic/react';
import { Controller } from 'react-hook-form';
import type { Control, UseFormClearErrors } from 'react-hook-form';
import type { IonTextareaCustomEvent } from '@ionic/core';
import setFormControllerImportClass from '@utils/setFormControllerClass';
import clearErrorsIfInvalid from '@utils/validation/clearErrorsIfInvalid';
import type TextareaNameAttribute from '@enums/forms/TextareaNameAttribute';
import type { PostInputs } from '../../types';

type ControllerTextareaProps = {
  readonly control: Control<PostInputs>;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  readonly clearErrors: UseFormClearErrors<any>;
  readonly name: TextareaNameAttribute;
  readonly label: string;
  readonly autofocus?: boolean;
  readonly labelPlacement?: 'stacked' | 'floating';
};

const ControllerTextarea: React.FC<ControllerTextareaProps> = ({
  control,
  clearErrors,
  label,
  name,
  autofocus = false,
  labelPlacement = 'floating',
}: ControllerTextareaProps) => (
  <Controller
    control={control}
    name={name}
    rules={{ required: true }}
    render={({
      field: { onChange, onBlur, value },
      fieldState: { invalid, isTouched },
    }) => (
      <IonTextarea
        className={setFormControllerImportClass(invalid, isTouched)}
        label={label}
        labelPlacement={labelPlacement}
        name={name}
        value={value}
        onIonBlur={onBlur}
        onIonChange={(
          event: IonTextareaCustomEvent<TextareaChangeEventDetail>,
        ) => {
          clearErrorsIfInvalid(invalid, name, clearErrors);
          if (event.detail.value) {
            onChange(event.detail.value);
          }
        }}
        rows={5}
        fill="solid"
        autofocus={autofocus}
        autoGrow
        clearOnEdit={false}
      />
    )}
  />
);

export default ControllerTextarea;

Code Reproduction URL

www.example.com

Ionic Info

Ionic:

   Ionic CLI       : 7.2.0 (/opt/homebrew/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 8.2.8

Capacitor:

   Capacitor CLI      : 6.1.2
   @capacitor/android : 6.1.2
   @capacitor/core    : 6.1.2
   @capacitor/ios     : 6.1.2

Utility:

   cordova-res : 0.15.4
   native-run  : 2.0.1

System:

   NodeJS : v22.7.0 (/opt/homebrew/Cellar/node/22.7.0/bin/node)
   npm    : 10.8.2
   OS     : macOS Unknown

Additional Information

I tried to add a code repro but the wizard is failing to load for me in Arc and Brave.

[brandyscarney]

Thank you for the issue! I have moved this to the stencil-ds-output-targets repository since this is the repository that caused this issue. We have an internal issue to investigate this further.

[tanner-reits]

We've reverted the version of the React output target used in the v8.2.9 and v8.3.1 releases of Ionic Framework as a temporary solution to this issue until we can investigate further.

[ptmkenny]

Thanks for the update. As I already asked over here, please consider adding automated tests against an Ionic sample app. This is the second time in two months that an Ionic release has broken my app because of a Stencil update, and this bug could have been caught prior to release by testing against an app that demoed all the available props.