Skip to content

PickerController doesn't show correctly #17664

@mariossavva

Description

@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
pickercontroller

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

Activity

liamdebeasi

liamdebeasi commented on Mar 4, 2019

@liamdebeasi
Contributor

Hi there,

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

mariossavva

mariossavva commented on Mar 5, 2019

@mariossavva
Author

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();
  }
}
added and removed
needs: replythe issue needs a response from the user
on Mar 5, 2019
liamdebeasi

liamdebeasi commented on Mar 5, 2019

@liamdebeasi
Contributor

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):
image

mariossavva

mariossavva commented on Mar 6, 2019

@mariossavva
Author

@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

added and removed
needs: replythe issue needs a response from the user
on Mar 6, 2019
liamdebeasi

liamdebeasi commented on Mar 6, 2019

@liamdebeasi
Contributor

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

46 remaining items

carlgik4

carlgik4 commented on Jun 10, 2021

@carlgik4

I got a solution, but I can't reply it on ionicframework.org, then I found similar question here.

Anyway, this is my solution:
If you want to update options, you could make the options same count, such as first time you have 5 items, second time 10 items, you can pad them all to above 10 items, such as 100 items, all the padding items, you can mark them as disable, these disabled items will not be displayed, but the animation seems correct.

1st time:
options: [{text, value, disabled: false}..., {text, value, disabled: true}...] // 100items

2nd time:
options: [{text, value, disabled: false}..., {text, value, disabled: true}...] // 100items

It also works with picker.addEventListener('ionPickerColChange', async (event: any) => {}

document.addEventListener("ionPickerColChange", this.ionPickerColChange);

ionPickerColChange = (event: Event) => {
        console.log(event);
        const e: any = event;
        if (e.detail?.name === "first") {
            //each column should has enough disabled padding items
            this.columns = this.generateColumns(e.detail);
            if (this.picker?.current) {
                this.picker.current.columns = this.columns;
            }
        }
    };

render(){
...
                   <IonPicker
                        ref={this.picker}
                        isOpen={this.state.pickerOpen}
                        showBackdrop={true}
                        backdropDismiss={true}
                        onDidDismiss={() => {
                            this.setState({
                                pickerOpen: false
                            });
                        }}
                        columns={this.columns}
                        buttons={[
                            {
                                text: "Cancel",
                                role: "cancel",
                                handler: selected => {
                                    console.log(selected);
                                }
                            },
                            {
                                text: "Confirm",
                                handler: selected => {
                                    console.log(selected);
                                }
                            }
                        ]}
                    />
...
}

It seems someone also has the same solution, I wondered why ionic team doesn't fix this issue, it bothers me for several hours.

added
type: buga confirmed bug report
and removed
type: buga confirmed bug report
on Jul 16, 2021
reza3vi

reza3vi commented on Sep 18, 2021

@reza3vi
// just before => await picker.present();

// use:
	for (let col of picker.columns) {
		for (let opt of col.options) {
			delete opt.selected;
			delete opt.duration;
			delete opt.transform;
		}
	}
removed this from the 6.0.0 milestone on Nov 23, 2021
yetkinaykan

yetkinaykan commented on Dec 1, 2021

@yetkinaykan

This problem persists in ionic 5 react version. (useIonPicker)

wall-street-dev

wall-street-dev commented on Jan 14, 2022

@wall-street-dev

As a workaround, I'm cleaning the original array of columns' options before showing the picker.
Here's a full example


import { Component, EventEmitter, Input, Output, TemplateRef, ViewChild } from '@angular/core';
import { PickerController } from '@ionic/angular';
import { PickerColumnOption } from '@ionic/core/dist/types/components/picker/picker-interface';

@Component({
  selector: 'app-picker',
  templateUrl: './picker.component.html',
  styleUrls: ['./picker.component.scss'],
})
export class PickerComponent {
  @Input() defaultLanguage!: PickerColumnOption;
  @Input() languagesList: Array<PickerColumnOption> = [];
  
  constructor(private pickerController: PickerController) {}

  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.languagesList.map(({ duration, transform, ...rest }) => rest),
          },
        ],
        buttons: [
          {
            text: 'Cancel',
          },
          {
            text: 'Done',
            handler: ({ item }) => this.optionSelected(item),
          },
        ],
      })
      .then((picker: HTMLIonPickerElement) => picker.present());
  }

  private findOptionIndex(option: PickerColumnOption, list: Array<PickerColumnOption>): number {
    return list.findIndex((item: PickerColumnOption) => item.value === option.value);
  }
}
self-assigned this
on Mar 23, 2022
sean-perkins

sean-perkins commented on Mar 24, 2022

@sean-perkins
Contributor

Hello everyone 👋

Can someone please test with this dev build and let me know if you continue to run into any issues?

6.0.14-dev.11648142586.16521a19

You should not need any workarounds for deleting values off the object.

ionitron-bot

ionitron-bot commented on May 4, 2022

@ionitron-bot

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

locked and limited conversation to collaborators on May 4, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @carlgik4@nvahalik@Stromberg@patelrikin@andreslon

      Issue actions

        PickerController doesn't show correctly · Issue #17664 · ionic-team/ionic-framework