Ionic-framework: PickerController doesn't show correctly

[mariossavva]

Bug Report

Ionic version:


[x] 4.x

Current behavior:

The second time the PickerController shows the options are not showing correctly.

Expected behavior:

It should show always the right options

Steps to reproduce:

Related code:

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.13.4
   @angular-devkit/schematics    : 7.3.4
   @angular/cli                  : 7.3.4
   @ionic/angular-toolkit        : 1.4.0

System:

   NodeJS : v10.15.1 (/usr/local/bin/node)
   npm    : 6.8.0
   OS     : macOS Mojave

[liamdebeasi]

Hi there,

Thanks for the issue. Can you share a repository with the code required to reproduce this issue? Thanks!

[mariossavva]

Here's a simple example (home.page.ts) from a new blank project. Hope this helps...

import { Component } from '@angular/core';
import { PickerController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  values = [
    { value: 1, text: 'value 1' },
    { value: 2, text: 'value 2' },
    { value: 3, text: 'value 3' },
    { value: 4, text: 'value 4' },
    { value: 5, text: 'value 5' }
  ]

  _selectedIndex: number = 0;

  constructor(private pickerCtrl: PickerController) { }

  async showPicker() {
    const picker = await this.pickerCtrl.create({
      buttons: [
        { text: 'Cancel' },
        {
          text: 'Done',
          handler: (value) => {
            const v = value.pick.value;
            this._selectedIndex = this.values.findIndex(i => i.value == v);
            console.log(this._selectedIndex);
          }
        }
      ],
      columns: [
        {
          name: 'pick',
          // if selectedIndex is set through a variable the view is messed up
          // selectedIndex: 2, // this works
          selectedIndex: this._selectedIndex, // this messes up the view
          options: this.values
        }
      ]
    });
    picker.present();
  }
}

[liamdebeasi]

Thanks for the code!
Which browser/version are you testing this on? This is what I see when I try it out in a blank Ionic starter app (ionic start myApp blank):

[mariossavva]

@liamdebeasi hi. i am using Chrome 72.

Here are the step that I got the issue:
The first time you select the controller it shows correctly.
Then pick an option say "value 3" and click Ok.
Then the second time you show the picker the options don't show correctly if the selectedIndex is set.

I hope this helps

[liamdebeasi]

Thanks for the follow up! I can reproduce this issue. We will look into it!

[Stromberg]

I have the same issue.

[nvahalik]

@liamdebeasi: I think @zwlccc is on the right track, here.

Other observations: When trying to recreate the issue using the base ionic code base, I could not get it to occur. Perhaps it's something that is only present in the Angular bindings?

[pppp0836]

I have same issue too,Expect good news

[zwlccc]

@nvahalik No, this is a problem with rendering styles. Dynamically set options. A rendering style error occurs,When the number of new options is greater than the old number of options.

[MengLu2016]

it is the problem of changed columns.options with dynamically set options, when click the picker without changing the selectedIndex twice, the columns.options will add three attribute of selected/duration/transform, just delete it.
columns.options.forEach(element => {
delete element.selected;
delete element.duration;
delete element.transform;
});

[nvahalik]

Indeed! That does indeed fix it for me.

[zwlccc]

@MengLu2016 This doesn't work for my components.ionic4-city-picker

[nparasur]

I was able to reproduce it, but was able to workaround it. The issue seems to be the way the values are set for the PickerColumnOptions. I did not have any issue with SelectedIndex being set dynamically. Note that the Ionic DatePicker component (see src when you have a chance) uses PickerController .
In my case I ended up with below.......................

You could do either

1. Explicitly set the Options - array as such
   ............
   columns: [
   {
   name: 'hours',
   selectedIndex: this.hrlyReminder.repeat-1, // this is where we set the default selection
   options: [
   { text: 'Every 1 hour', value: '1' },
   { text: 'Every 2 hours', value: '2' },
   { text: 'Every 3 hours', value: '3' },
   { text: 'Every 4 hours', value: '4' },
   ]
   }
   ...........

OR

1. thru a function as such....

.......
createPickerColumnOptions() : PickerColumnOption[] {
let hoursData:PickerColumnOption[] = [
{ text: 'Every 1 hour', value: '1' },
{ text: 'Every 2 hours', value: '2' },
{ text: 'Every 3 hours', value: '3' },
{ text: 'Every 4 hours', value: '4' }
];
console.log('Data is ' + JSON.stringify(hoursData));
return hoursData;
}
..........
..........
columns: [
{
name: 'hours',
selectedIndex: this.hrlyReminder.repeat-1, // this is where we set the default selection
options: this.createPickerColumnOptions()

    }
  ]

[a7md0]

I have the same issue using chrome browser. The solution by @MengLu2016 is working perfectly.

Ionic:
   Ionic CLI                     : 5.2.3 (AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.6.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

System:
   Android SDK Tools : 26.1.1 (Android\Sdk)
   NodeJS            : v10.0.0 (nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 10

[michaelins]

@MengLu2016 Could you show a full demo of your workaround? I just tried and it doesn't work for me. Thanks.

[a7md0]

@michaelins

async numberPicker() {
    const picker = await this.pickerCtrl.create({
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'Confirm',
          handler: (data) => {
            console.log(data.number);
          }
        }
      ],
      columns: [{
        name: 'number',
        options: [
          { text: 'One', value: 1 },
          { text: 'Two', value: 2 },
        ]
      }]
    });

    picker.columns[0].options.forEach(element => {
      delete element.selected;
      delete element.duration;
      delete element.transform;
    });

    picker.present();
  }

[michaelins]

@liamdebeasi is there a fix coming soon? I really need this...

[michaelins]

@a7md0 thank you but didn't work for me. When I update the columns i.e. replace column options with new ones, all new options are stacked again.

[jwhiteaei]

I had the exact same problem and was able to fix it using the techniques from this thread. THANK YOU everyone! I'm doing this on picker dismissal. Changed it to work for multi-column pickers as well:

  async showPicker() {
    let opts: PickerOptions = {
      buttons: [{ text: 'Cancel', role: 'cancel' }, { text: 'Done' }],
      columns: [{ name: 'Name', options: this.options, selectedIndex: 0 }],
    };
    let picker = await this.pickerCtrl.create(opts); picker.present();
    picker.onDidDismiss().then(async data => {
      // ... program logic
      picker.columns.forEach(col => { col.options.forEach(el => { delete el.selected; delete el.duration; delete el.transform; }) })
    });
}

[zwlccc]

@jwhiteaei Thank you for your help. I will try to see if this method works in my component.

[belkka]

It looks like the same PickerOptions object must not be reused for several pickers. I. e. if you store options in component instance, do a copy before passing to pickerController.create():

const opts = JSON.parse(JSON.stringify(this.opts));
const picker = await this.pickerController.create(opts);

[halkhateeb]

Hi there,
I think we are dealing with two separate problems here:

1- If you get all your options stacked once you reopen the picker, then the solution suggested by @MengLu2016 should solve your problem

2- If you are working with dynamic options, in my case I have 2 columns where the options in column B depends on the value selected by column A. You need to make sure that options in column B always have the same length. Otherwise, you might see stacked options if the number of the new options is greater than the number of the old options as @zwlccc said. So what I did, is to make sure that all possible options have the same length by adding disabled options by the end of the smaller one.

For example:

PossibleOptionsForColumnB = [
    [
      { value: 1, text: 'value 1' },
      { value: 2, text: 'value 2' },
      { value: 3, text: 'value 3' },
      { value: 4, text: 'value 4' },
      { value: -1, text: '', disabled: true }
    ],
    [
      { value: 1, text: 'value 1' },
      { value: 2, text: 'value 2' },
      { value: 3, text: 'value 3' },
      { value: 4, text: 'value 4' },
      { value: 5, text: 'value 5' }
    ]
    ,
    [
      { value: 1, text: 'value 1' },
      { value: 2, text: 'value 2' },
      { value: 3, text: 'value 3' },
      { value: -1, text: '', disabled: true },
      { value: -1, text: '', disabled: true }
    ]
  ];

[michaelins]

@halkhateeb your solution works like a charm! Thank you for saving my day.

[Galiza]

It partially works for me, once I open the PickerController for the second time, I can see it all stacked up and then animating to their right positions.
What I need is for it to already be organized once I open a second time.

EDIT: I was actually able to make it work by using the solution by @MengLu2016, but instead of deleting everything after Dismiss, I deleted everything before rendering the picker.

[nurizzatiabdharis]

@Galiza i've got the same problem as you but your solution doesn't work for me. Any ideas why?

[Galiza]

@nurizzatiabdharis Very strange, here's how I solved it:

async openPicker() {
    this.removeAllAddedAttributesToArray();
    const pickerElement = await this.pickerCtrl.create({
      buttons: [
        {
          text: CANCEL,
          cssClass: 'cancel-btn',
          role: 'cancel'
        },
        {
          text: DONE,
          cssClass: 'done-btn',
          role: 'done',
          handler: (data) => {
            this.changeValue(data.value);
          }
        }
      ],
      columns: [{
        name: 'col',
        options: this.simpleColumns,
        selectedIndex: this.selectedIndex
      }],
      cssClass: 'ion-picker',
    });

    await pickerElement.present();
}

private removeAllAddedAttributesToArray() {
    this.simpleColumns.forEach((data) => {
      if (data.duration) {
        delete data.transform;
        delete data.duration;
        delete data.selected;
      }
    });
  }

[punixxher]

This work for me @nurizzatiabdharis thanks.

[netsesame2]

I got the same issue when use dynamic column options. Just as @zwlccc @halkhateeb, if the new options has short length than current one, overlay will happen.
Can be produced in both ionic 4.x and 5.x.

@halkhateeb gives a nice workaround to add some disabled options, till now it seems as the only solution.

[ishaiavrahami]

Experiencing the same issue.. Running ionic latest(5.x.)

what solved the issue was declaring
function removeAllAddedAttributesToArray() { data.forEach(data => { delete data.transform; delete data.duration; delete data.selected; }); }

and calling it above the const picker = await pickerController.create({

[janbuerling]

Any solution for dynamic column options?

I tried disabling the options, but then I had a strange behavior. The options are no longer displayed, but still selectable.

And besides, it does not look good if there are such huge gaps.

[gusterwoei]

Having the same issues on Ionic 5 React. First time opening the picker, the options are showing fine. Close it and open again the options will overlap.

[JavOLeeN]

Same problem on Ionic 5 Angular.

[olaisen81]

Same issue on Ionic 5 Angular

[patelrikin]

For those having issue with using IonPicker component in React. Here's my solution:

Place sortOptions inside the render() or if using functional component then place it inside the function declaration like below:

  const sortOptions: PickerColumn[] = [
    {
      name: "sortOption",
      options: [
        { text: "Apple", value: "red" },
        { text: "Banana", value: "yellow" },
        { text: "Orange", value: "orange" },
      ],
    },
  ];

And in your IonPicker it stays the same

<IonPicker
     //...
     columns={sortOptions}
     //...
    />

It re-creates sortOptions on every render (not optimal but it is what it is until the "real" fix)

@gusterwoei FYI

[HeikoKanzler]

I had the same problem. Turned around the picker has issues if you also reuse column options, in my case I used a array of 60 values (for minutes and seconds) two times and the picker didn't display the seconds correctly on first time opening, while also showing the stacked items on all secondary opens.

So I

1. used different arrays ( a copy)
2. used @jwhiteaei code (loop that removes selected, duration and transform)

Thank you all!

[olaisen81]

Hi there,
I think we are dealing with two separate problems here:

1- If you get all your options stacked once you reopen the picker, then the solution suggested by @MengLu2016 should solve your problem

2- If you are working with dynamic options, in my case I have 2 columns where the options in column B depends on the value selected by column A. You need to make sure that options in column B always have the same length. Otherwise, you might see stacked options if the number of the new options is greater than the number of the old options as @zwlccc said. So what I did, is to make sure that all possible options have the same length by adding disabled options by the end of the smaller one.

For example:

PossibleOptionsForColumnB = [
    [
      { value: 1, text: 'value 1' },
      { value: 2, text: 'value 2' },
      { value: 3, text: 'value 3' },
      { value: 4, text: 'value 4' },
      { value: -1, text: '', disabled: true }
    ],
    [
      { value: 1, text: 'value 1' },
      { value: 2, text: 'value 2' },
      { value: 3, text: 'value 3' },
      { value: 4, text: 'value 4' },
      { value: 5, text: 'value 5' }
    ]
    ,
    [
      { value: 1, text: 'value 1' },
      { value: 2, text: 'value 2' },
      { value: 3, text: 'value 3' },
      { value: -1, text: '', disabled: true },
      { value: -1, text: '', disabled: true }
    ]
  ];

@halkhateeb How to avoid column dependancy?
I'm using picker.addEventListener('ionPickerColChange', async (event: any) => {} to refresh column but not works!

[andreslon]

Upgrading some packages it's was solved.

    "@ionic/react": "^5.3.4",
    "@ionic/react-router": "^5.3.4",

To upgrade just run:

npm update