Ion-picker in React: modify options with ionPickerColChange

I’m trying to use the ion-picker component with multiple columns in a React Ionic app.

I need to set the possible values in one column based on the selected values in the other columns analogous to what the ion-datetime component is doing (where the values for day depend on the selected month and year).

I can catch the change with

document.addEventListener('ionPickerColChange', (event) => {
    this.setState({ columns: ... })

The problem is that the picker (which receives the columns as <IonPicker … columns={this.state.columns} /> doesn’t seem to get refreshed when the state changes. Items that should be disabled are still there and only disappear when I close and reopen the picker.

Any idea how I can solve this? Or alternatively, does someone know an npm package that I can use instead which contains components for a datepicker and a custom picker which supports this functionality?


Same issue with Ionic 5 angular! How did you resolve this behavior? It’s very strange that Ionic Team doesn’t provide a method to refresh picker.

Unfortunately I didn’t find a solution…

It seems there are methods to refresh and update the picker column, but these methods are private. :roll_eyes: