Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BUG with select all checkbox #336

Closed
ghost opened this issue Aug 20, 2021 · 5 comments · Fixed by #396
Closed

BUG with select all checkbox #336

ghost opened this issue Aug 20, 2021 · 5 comments · Fixed by #396

Comments

@ghost
Copy link

ghost commented Aug 20, 2021

Describe the bug
Checkbox "Select all / unselect all" is checked even if not all list elements are checked

To Reproduce
https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example

  1. click in "Tooltip on the Select All Checkbox"
  2. type "J"
  3. click checkbox "Select all / unselect all" -> "Bank J (Italy)" and checkbox "Select all / unselect all" is checked
  4. close list by clicking outside
  5. click in "Tooltip on the Select All Checkbox"
  6. ERROR -> checkbox "Select all / unselect all" is checked, although only "Bank J (Italy)" is checked

Expected behavior
Checkbox "Select all / unselect all" shouldn't be checked

Screenshots

Desktop (please complete the following information):
OS: Windows 10
Browser Google Chrome
Version 92.0.4515.159

Smartphone (please complete the following information):

Additional context

@ghost ghost added the bug Something isn't working label Aug 20, 2021
@macjohnny macjohnny added duplicate This issue or pull request already exists and removed bug Something isn't working labels Aug 20, 2021
@macjohnny macjohnny reopened this Aug 20, 2021
@macjohnny macjohnny added examples and removed duplicate This issue or pull request already exists labels Aug 20, 2021
@macjohnny
Copy link
Member

do you want to fix the examples?

@macjohnny macjohnny changed the title [BUG] BUG in example with select all checkbox Aug 20, 2021
@ghost
Copy link
Author

ghost commented Aug 31, 2021

I only mentioned the examples, because it's the same behavior as in my application.

As you can see below, I added [toggleAllCheckboxChecked]="allSelectedChecked.locations" to my ngx-mat-select-search.
For test purposes I added (focus)="onFocusFilter()" to my mat-select with a console.log('----- onFocusFilter() this.allSelectedChecked', this.allSelectedChecked['locations']);
Even if this.allSelectedChecked['locations'] is false, the all checkbox is checked.

<mat-select multiple (focus)="onFocusFilter()" [ngModel]="inputFields?.locations" (ngModelChange)="inputFields.locations = $event; filtersChanged()">
  <mat-option>
    <ngx-mat-select-search [showToggleAllCheckbox]="true" (toggleAll)="toggleAllSelection($event, 'locations'); filtersChanged()"
                           [toggleAllCheckboxChecked]="allSelectedChecked.locations"
                           [toggleAllCheckboxTooltipMessage]="translations?.selectUnselectAll" [toogleAllCheckboxTooltipPosition]="'above'"
                           [alwaysRestoreSelectedOptionsMulti]="true" [formControl]="locationFilterCtrl"
                           placeholderLabel="{{ translations?.search }}" noEntriesFoundLabel="{{ translations?.noResultsFound }}">
      <mat-icon ngxMatSelectSearchClear>clear</mat-icon>
    </ngx-mat-select-search>
  </mat-option>
  <mat-option *ngFor="let location of filterOptionsFiltered?.locations"
              [value]="location?.id">
    {{ location?.name }}
  </mat-option>
</mat-select>

@ghost ghost changed the title BUG in example with select all checkbox BUG with select all checkbox Sep 1, 2021
@AhsanAyaz
Copy link
Contributor

@macjohnny can you mark this issue for hacktoberfest? Thanks

@macjohnny
Copy link
Member

@AhsanAyaz I added the topic "hacktoberfest" to this repo, this should be enough, right?

@AhsanAyaz
Copy link
Contributor

@macjohnny , yeah I believe so!
And thanks 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants