CODEWITHSUNDEEP
angularionic-framework
Diesel
Diesel

Reputation: 5335

First radio button inside *ngFor requires two clicks to show selected

Edit: The "searching..." and moving the elements has something to do with it. If I remove it, it works great on the first search. then if I search again, I have to click twice on every new element to select them. Below is a video without the searching. I move the mouse off the button and back on if I have to click it twice

edit-demo]

I have an ion-radio-group where some elements come from a *ngFor. When the first item is selected, the value of the form changes (I tested that the value is changed on the form correctly, and you can see the submit button becomes clickable with the right value). But, the radio is not checked. This only happens on the first item. In the below demo you will see I click the radio (the submit button becomes enabled), then on the second click, it selects the radio visually.

The other two radios both select on the first click.

demo]

Here is the HTML:

 <ion-content padding>
  <form [formGroup]="form">
    <ion-label>{{ message }}</ion-label>
    <ion-item>
      <ion-input color="primary" formControlName="search" placeholder="city or address"></ion-input>
      <ion-button (click)="searchClicked()" fill="clear"
        ><ion-icon onclick="searchClicked()" name="search" slot="icon-only"></ion-icon
      ></ion-button>
    </ion-item>
    <ion-list>
      <ion-radio-group formControlName="radio" (ionSelect)="radioSelected($event)">
        <ion-item *ngFor="let searchResult of searchResults; let i = index">
          <ion-radio value="{{ i }}" margin-end></ion-radio>
          <ion-label>{{ searchResult.name }}</ion-label>
        </ion-item>

        <ion-grid class="double-padding-start">
          <ion-row align-items-center>
            <ion-radio value="city" margin-end></ion-radio>
            <ion-select okText="Okay" cancelText="Dismiss" formControlName="city">
              <ion-select-option *ngFor="let city of cities" [value]="city.id">
                {{ city.name }}
              </ion-select-option>
            </ion-select>
          </ion-row>
        </ion-grid>
      </ion-radio-group>
    </ion-list>

    <ion-button
      (click)="dismiss()"
      [disabled]="!form.valid"
      fill="clear"
      class="button-padding-start large"
      margin
      >Submit</ion-button
    >
  </form>
</ion-content>

Here is the code requested:

  radioSelected($event: CustomEvent) {
    const details: RadioChangeEventDetail = $event.detail;
    const result = this.getResult(details.value);
    if (result) {
      this.changed.emit(result);
    }
  }

  getResult(radio?: string): SortAndFilter['searchResult'] | undefined {
    if (!this.form) return;
    const radioValue: string = radio ? radio : this.form.controls.radio.value;
    let result: SortAndFilter['searchResult'];

    if (radioValue === 'city') {
      const cityId = this.form.value.city;
      if (this.cities) {
        const city: City | undefined = this.cities.find(searchedCity => searchedCity.id === cityId);
        if (city) {
          result = {
            lat: city.lat,
            lng: city.lng,
            zoom: city.zoom,
            name: city.name,
          };
        }
      }
    } else {
      const index = Number(radioValue.split(',')[0]);
      if (typeof index === 'number' && this.searchResults.length > index) {
        result = {
          lat: this.searchResults[index]!.lat,
          lng: this.searchResults[index]!.lng,
          zoom: 12,
          name: this.searchResults[index]!.name,
        };
      }
    }

    return result;
  }

This is also run when the search is clicked:

  searchClicked() {
    if (!this.form) return;
    const searchTerm = this.form.controls.search.value;
    if (!searchTerm) return;
    this.searchStatus = 'searching';
    this.mapService.loadSdk().subscribe(loaded => {
      if (loaded) {
        this.mapService.lookupLocation(searchTerm).then(results => {
          if (results.length === 0) {
            this.searchStatus = `${searchTerm} not found`;
            this.searchResults = [];
          } else {
            this.searchResults = results;
            this.searchStatus = undefined;
          }
        });
      } else {
        this.searchStatus = undefined;
      }
    });
  }

Upvotes: 1

Views: 1836

Answers (1)

Diesel
Diesel

Reputation: 5335

The issue was the value="{{ i }}" for the radio button. Radio buttons appear to need unique values even if you are replacing the radio in the *ngFor to avoid this bug. I time stamped my indices to make them unique.

When a search is clicked I set the current time (ms) to a variable called time, then I set the radio to value = "{{ time + i }}. The time variable is subtracted to get the i when it's read.

Upvotes: 2

Related Questions