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
    });

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