ion picker options overlaps

Question

Currently, I am working on a ionic application which require ion-picker (multi column picker).

I got the data perfectly as I want but just one time means when I open picker for the first time, but after that when I click second time the all options overlapped, I am not able to upload image because of stackoverflow (10 reputation) policy. so please refer the example here , I have also tried selectedIndex: 0 as suggested in the GitHub link but nothing change.please let me know if anyone know how to solve this.

Thanks in advance

var myColumns = [
        {
            name: "days",
            options: this.day2,
            selectedIndex: 1
        },
        {
            name: "Hours",
            options: this.hours2,
            selectedIndex: 1
        },
        {
            name: "Minutes",
            options: this.minutes2,
            selectedIndex: 1
        },
        {
            name: "dayType",
            options: this.HourType,
            selectedIndex: 1
        }
    ];
    const picker = await this.pickerCtrl.create({
        buttons: [
            {
                text: "Done"
            },
            { text: "Cancel" }
        ],
        mode: "md",
        cssClass: ["datePicker"],
        columns: myColumns
    });

Zilpah

Can you please add some code related to ion-picker so we can get the idea what's going wrong based on your code? – Vorous

i have updated the question ,please take a look. – Zilpah

Answer 1

First of all, I found that the problem is that you put the options with an array, I mean you don't put them manually.

Then I think you have 2 options:

first one is put the options manually(in my opinion is not worth it), and the second one, i found that if you put selectedIndex: 0, on the columns properties, the overlap should be gone, but the picker will open always on the first entry. And if you override this selectedIndex: 0, and put a variable that you can change when ever you want, the overlap should be gone, for the most of the entries, except for the first one and the last one. That's what occur to me.

Hope this help you.

Edit:

I was looking around and just found this:

let picker = await this.pickerCtrl.create(opts);

    picker.present();
    picker.onDidDismiss().then(async data => {
      let num = await picker.getColumn('num');
this.pickerData = num.options[num.selectedIndex].text;
        this.pickerDataPrevious = num.selectedIndex;   


num.options.forEach(element => {
            delete element.selected;
            delete element.duration;
            delete element.transform;
            });
        });

If you loop the options (in that case num.options) and delete this properties, the picker data should work correctly

Senlac

Answer 2

Just before picker.present();

Add these lines :

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

Ref: https://github.com/ionic-team/ionic-framework/issues/17664

Zischke

Answer 3

Yup, this is a known issue
The problem is that there are 2 properties being added to the original column's options object: duration & transform

As a workaround, you can manually remove these 2 properties. Here's a clean way to do it.

onShowOptions(): void {
    const selectedIndex = this.findOptionIndex(this.defaultLanguage, this.languagesList);
    this.pickerController
      .create({
        columns: [
          {
            selectedIndex: selectedIndex,
            name: 'item',
            // here's where the magic happens: spread the object, remove duration & transform properties and keep the rest
            options: this.options.map(({ duration, transform, ...rest }) => rest),
          },
        ],
        buttons: [
          {
            text: 'Cancel',
          },
          {
            text: 'Done',
            handler: ({ item }) => this.optionSelected(item),
          },
        ],
      })
      .then((picker: HTMLIonPickerElement) => picker.present());
  }

Station