Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: 8.2.7 to 8.2.8 ion-input autofocus renamed autoFocus #475

Open
3 tasks done
ptmkenny opened this issue Sep 6, 2024 · 3 comments · Fixed by ionic-team/ionic-framework#29869
Open
3 tasks done
Labels
package: react @stencil/react-output-target package type: bug Something isn't working

Comments

@ptmkenny
Copy link

ptmkenny commented Sep 6, 2024

Prerequisites

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.

@ionitron-bot ionitron-bot bot added the triage label Sep 6, 2024
@brandyscarney brandyscarney transferred this issue from ionic-team/ionic-framework Sep 9, 2024
@brandyscarney
Copy link
Member

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.

github-merge-queue bot pushed a commit to ionic-team/ionic-framework that referenced this issue Sep 16, 2024
Issue number: resolves ionic-team/stencil-ds-output-targets#476,
resolves ionic-team/stencil-ds-output-targets#475, resolves #29848

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

In v0.6.0 of the [React output
target](https://www.npmjs.com/package/@stencil/react-output-target), the
implementation was changed to leverage Lit's utility for creating React
components from web components. This introduced some unforseen issues
and breaking changes.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Reverts many of the changes from
#29782 to downgrade
the React output target package to the last stable version (v0.5.3)
- Downgrades the version of Stencil to v4.20.0 (due to
ionic-team/stencil#5983 causing problems with
the downgraded output target)
- Pins these versions and prevents Renovate from attempting to upgrade
until the associated issues are resolved

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build for this version: `8.3.1-dev.11726167750.15400355`

I tested the dev build against the use cases outlined in
ionic-team/stencil-ds-output-targets#475 and
ionic-team/stencil-ds-output-targets#476
github-merge-queue bot pushed a commit to ionic-team/ionic-framework that referenced this issue Sep 16, 2024
Issue number: resolves ionic-team/stencil-ds-output-targets#476,
resolves ionic-team/stencil-ds-output-targets#475, resolves #29848

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

In v0.6.0 of the [React output
target](https://www.npmjs.com/package/@stencil/react-output-target), the
implementation was changed to leverage Lit's utility for creating React
components from web components. This introduced some unforseen issues
and breaking changes.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Reverts many of the changes from
#29782 to downgrade
the React output target package to the last stable version (v0.5.3)
- Downgrades the version of Stencil to v4.20.0 (due to
ionic-team/stencil#5983 causing problems with
the downgraded output target)
- Pins these versions and prevents Renovate from attempting to upgrade
until the associated issues are resolved

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build for this version: `8.3.1-dev.11726167750.15400355`

I tested the dev build against the use cases outlined in
ionic-team/stencil-ds-output-targets#475 and
ionic-team/stencil-ds-output-targets#476
@tanner-reits tanner-reits reopened this Sep 16, 2024
brandyscarney pushed a commit to ionic-team/ionic-framework that referenced this issue Sep 17, 2024
Issue number: resolves ionic-team/stencil-ds-output-targets#476,
resolves ionic-team/stencil-ds-output-targets#475, resolves #29848

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

<!-- Please describe the current behavior that you are modifying. -->

In v0.6.0 of the [React output
target](https://www.npmjs.com/package/@stencil/react-output-target), the
implementation was changed to leverage Lit's utility for creating React
components from web components. This introduced some unforseen issues
and breaking changes.

<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Reverts many of the changes from
#29782 to downgrade
the React output target package to the last stable version (v0.5.3)
- Downgrades the version of Stencil to v4.20.0 (due to
ionic-team/stencil#5983 causing problems with
the downgraded output target)
- Pins these versions and prevents Renovate from attempting to upgrade
until the associated issues are resolved

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build for this version: `8.3.1-dev.11726167750.15400355`

I tested the dev build against the use cases outlined in
ionic-team/stencil-ds-output-targets#475 and
ionic-team/stencil-ds-output-targets#476
@tanner-reits
Copy link
Member

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: react @stencil/react-output-target package type: bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants