SIGN IN SIGN UP

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

0 0 114 TypeScript

fix(picker-column): dynamically change options (#27359)

Issue number: resolves #21763

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- 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. -->

Picker options do not render correctly when dynamically changed. It
throws an error when the original options' length is no longer the same
as the updated options' length. This is due to `refresh()` being called
with `this.optsEl` having a stale list of children. The list doesn't get
updated until the upcoming render.


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

The column will call `refresh()` when it detects the columns has
changed. The call needs to be done after `this.optsEl` gets updated with
the correct number of children.

`componentShouldUpdate()` will check if options has changed ->
re-renders with the updated options -> `componentDidUpdate()` calls
`refresh()` based on `componentShouldUpdate()`

The standalone test page has been updated to include a way to test this
fix.


## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

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

It might be beneficial to review the [component
lifecycle](https://stenciljs.com/docs/component-lifecycle).

Co-authored-by: liamdebeasi <liamdebeasi@users.noreply.github.com>

---------

Co-authored-by: ionitron <hi@ionicframework.com>
M
Maria Hutt committed
7c7fb2b1a3bf35b123716b2f975231ceb01dcc07
Parent: 76d428a
Committed by GitHub <noreply@github.com> on 5/11/2023, 3:23:45 PM