fix(select): mark touched on hide trigger only when select is open

[yggg]

Please read and mark the following check list before creating a pull request:

• I read and followed the CONTRIBUTING.md guide.
• I read and followed the New Feature Checklist guide.

Short description of what this resolves:

Closes #1418 and #1629.
Prevents select from being marked touched when it's closed and hide$ trigger emit because user clicks outside select + tests.
Also has a fix to mark touched when user tabbed out from select overlay.

[codecov]

Codecov Report

Merging #1878 into master will increase coverage by 0.12%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #1878      +/-   ##
==========================================
+ Coverage   84.02%   84.14%   +0.12%     
==========================================
  Files         234      234              
  Lines        7695     7703       +8     
  Branches      675      675              
==========================================
+ Hits         6466     6482      +16     
+ Misses       1031     1023       -8     
  Partials      198      198

Impacted Files	Coverage Δ
...ork/theme/components/cdk/a11y/focus-key-manager.ts	100% <100%> (ø)	⬆️
...mework/theme/components/select/select.component.ts	89.96% <100%> (+3.12%)	⬆️
...framework/theme/components/cdk/a11y/a11y.module.ts	100% <100%> (ø)	⬆️

[mayanksudden]

Hi yggg,

I have used nb-select with *ngif validation with reactive form, now click anywhere on the page , the validation error appear.
Expected: when click on dropdown and not select any value then error should appear, according to define validation.
I seen your changes in ts file but not clear that which code will be use in select.component.ts for this issue.

          <label for="currencyType" class="label offset-sm-2 col-sm-2 col-form-label">Currency Type:</label>
      
      <div class="col-sm-5">
          <nb-select placeholder="Select" [class.is-invalid]="currencyType.invalid && currencyType.touched" class="form-control" [selected]="" formControlName="currencyType" (selectedChange)="changePeriod($event)">
              <nb-option *ngFor="let period of currency_types" [value]="period">{{ period }}</nb-option>
            </nb-select>
            <div *ngIf="currencyType.invalid && currencyType.touched">
                <small *ngIf="currencyType.errors?.required" class="text-danger">month is required</small>
            </div>
      </div>
  </div>

[yggg]

Hi @mayanksudden. Please, post an issue with a reproducible example to illustrate the problem (Nebular stackblitz template). As I can see, select calls touched callback once it looses focus, so validation should occur. Also, please specify Nebular version you use.

[guilhermefinotti]

I face the same issue presented here in this stackblitz's example

While using the NbSelectComponent inside a Reactive Form the touched property is set to true when i click an other Control or even some random place in the page

What do I need to update in the project?

My package.json

"dependencies": {
   "@agm/core": "^1.1.0",
   "@angular/animations": "^8.2.14",
   "@angular/cdk": "^8.2.3",
   "@angular/common": "^8.2.14",
   "@angular/compiler": "^8.2.14",
   "@angular/core": "^8.2.14",
   "@angular/forms": "^8.2.14",
   "@angular/material": "^8.2.3",
   "@angular/platform-browser": "^8.2.14",
   "@angular/platform-browser-dynamic": "^8.2.14",
   "@angular/router": "^8.2.14",
   "@asymmetrik/ngx-leaflet": "3.0.1",
   "@nebular/auth": "^4.6.0",
   "@nebular/eva-icons": "4.1.2",
   "@nebular/security": "4.1.2",
   "@nebular/theme": "^4.1.2",
   "@ng-bootstrap/ng-bootstrap": "^5.2.2",
   "@swimlane/ngx-charts": "^10.1.0",
   "angular-tree-component": "7.2.0",
   "angular2-chartjs": "0.4.1",
   "angular2-toaster": "^7.0.0",
   "bootstrap": "4.3.1",
   "chart.js": "2.7.1",
   "ckeditor": "4.7.3",
   "classlist.js": "1.1.20150312",
   "core-js": "2.5.1",
   "echarts": "^4.7.0",
   "eva-icons": "^1.1.3",
   "hammerjs": "^2.0.8",
   "intl": "1.2.5",
   "ionicons": "2.0.1",
   "leaflet": "1.2.0",
   "nebular-icons": "1.1.0",
   "ng2-ckeditor": "^1.2.7",
   "ng2-completer": "2.0.8",
   "ng2-pdfjs-viewer": "^5.0.7",
   "ng2-smart-table": "^1.3.5",
   "ngx-echarts": "^4.2.2",
   "ngx-gallery": "^5.10.0",
   "ngx-image-gallery": "^2.0.4",
   "ngx-mask": "^8.1.7",
   "ngx-textarea-autosize": "^2.0.3",
   "node-sass": "^4.13.1",
   "normalize.css": "6.0.0",
   "pace-js": "1.0.2",
   "print-js": "^1.0.63",
   "roboto-fontface": "0.8.0",
   "rxjs": "6.5.2",
   "rxjs-compat": "6.3.0",
   "socicon": "3.0.5",
   "tinymce": "4.5.7",
   "tslib": "^1.11.1",
   "typeface-exo": "0.0.22",
   "web-animations-js": "github:angular/web-animations-js#release_pr208",
   "zone.js": "~0.9.1"
 },
 "devDependencies": {
   "@angular-devkit/build-angular": "^0.800.6",
   "@angular/cli": "^8.3.25",
   "@angular/compiler-cli": "^8.2.14",
   "@angular/language-service": "8.0.0",
   "@compodoc/compodoc": "1.0.1",
   "@fortawesome/fontawesome-free": "^5.12.1",
   "@types/d3-color": "1.0.5",
   "@types/googlemaps": "^3.39.3",
   "@types/jasmine": "2.5.54",
   "@types/jasminewd2": "2.0.3",
   "@types/leaflet": "1.2.3",
   "@types/node": "6.0.90",
   "codelyzer": "^5.2.1",
   "conventional-changelog-cli": "1.3.4",
   "husky": "0.13.3",
   "jasmine-core": "2.6.4",
   "jasmine-spec-reporter": "4.1.1",
   "karma": "1.7.1",
   "karma-chrome-launcher": "2.1.1",
   "karma-cli": "1.0.1",
   "karma-coverage-istanbul-reporter": "1.3.0",
   "karma-jasmine": "1.1.0",
   "karma-jasmine-html-reporter": "0.2.2",
   "npm-run-all": "4.0.2",
   "protractor": "5.1.2",
   "rimraf": "2.6.1",
   "stylelint": "7.13.0",
   "ts-node": "3.2.2",
   "tslint": "^5.20.1",
   "tslint-language-service": "^0.9.9",
   "typescript": "3.4.5"
 }