[iconPicker] -> Search *shouldn't* be set during Init?

[BallisticPain]

So I have an issue where when someone uses this form to edit a configured icon, they have to remove the search value before they can see more icons. I found the issue in the code at this line.

I know it is intentional, but for me it's limiting. When I just went back to see this code, I noticed a setSearch method. I'm going to attempt to use this in the interim, but maybe you can explain why when coming back to the control as an "edit" it should search the icon I already have selected and displayed, please?

Here's my HTML so you have an idea of what I'm doing. I added the icons[i] in an attempt to make it work how the example(s) work. Previously, I was using my getIcon(i).value in the [iconPicker] directive.

<div class="container" [formGroup]="scoreConfigForm">
  <div class="width-constrained"
       formArrayName="configs">
    <div *ngFor="let config of configs; let i = index;">
      <div [formGroupName]="i">
        <label>The <strong>Icon</strong>&nbsp;</label>
        <span title="Click to change"
              [ngStyle]="{'color': getColor(i).value, 'font-size': '1.5em'}"
              [iconPicker]="icons[i]"
              [ipPosition]="'bottom'"
              [ipIconPack]="['fa5']"
              [ipWidth]="'250px'"
              [ipFallbackIcon]="fallbackIcon"
              (iconPickerSelect)="onIconPickerSelect($event, i)"
        >
          <i [ngClass]="getIcon(i).value" class="fa-fw fa-sm"></i>
        </span>
        <input type="hidden" name="icon"
               formControlName="icon"
               [value]="getIcon(i).value"/>
        <label> with the <strong>Color</strong></label>
        <button type="button" class="button-sm ui-corner-all"
                title="Click to change"
                [style.background]="getColor(i).value"
                [cpFallbackColor]="fallbackColor"
                [colorPicker]="getColor(i).value"
                (colorPickerChange)="onColorPickerSelect($event, i)"
        >
          {{ getColor(i).value }}
        </button>
        <input type="hidden" name="color"
               formControlName="color"
               [value]="getColor(i).value"/>
        <label>represents the <strong>Name</strong>&nbsp;</label>
        <div class="inline">
          <div *ngIf="getName(i).invalid && getName(i).touched"
               class="error-small">
            Required.
          </div>
          <input type="text" name="name" class="form-control"
                 formControlName="name"
                 [value]="getName(i).value"/>
        </div>
        <label>&nbsp;<strong>Until</strong> the user score reaches </label>
        <div class="inline">
          <div *ngIf="getUntil(i).invalid && getUntil(i).touched"
               class="error-small">
            Invalid value, must be from 0.0 through 5.0.
          </div>
          <input type="number" name="until" class="form-control"
                 formControlName="until"
                 [step]="defaultValues.until.step"
                 [min]="defaultValues.until.min"
                 [max]="defaultValues.until.max"
                 [value]="getUntil(i).value"/>
        </div>
        <span>
        <i class="fal fa-trash-alt" (click)="onRemoveRow(i)"></i>
      </span>
      </div>
    </div>
    <div class="right">
    <span>
      <i class="fal fa-plus-circle" (click)="onAddScoringConfiguration()"></i>
    </span>
    </div>
  </div>
  <div class="clear-float">
    <input type="submit"
           class="button button-default button-round-corners"
           value="Save Configuration"
           (click)="onSaveConfiguration(scoreConfigForm.value)">
    <input type="button"
           class="cancel button button-default button-round-corners"
           data-href=""
           value="Cancel"
           (click)="onCancelClick()">
  </div>
</div>

Also, huge THANK YOU for this component! If you feel this can be changed via a PR, I would be happy to submit one. I'm always interested in assisting!

Thanks!

[greg7859]

I work to enable ou disable this behavior. By default, the search text won't be filled on opening of the popup.

[greg7859]

Can you checkout the branch and check that the behavior is that you want?

I added several example with differents tags (a, span, button). By default the search filter is not filled with the selected icon. Only one example enables the search filter filling.

If it's ok for you, i will generate a new version to deploy it.

[BallisticPain]

@greg7859 Thank you for the rapid work. I will check it in moments!

[BallisticPain]

@greg7859 I'm having trouble after I have installed the component through the git ref... (when I run the build ng b)

Error:

ERROR in projects/scoring/src/app/app.module.ts:8:34 - error TS2307: Cannot find module 'ngx-icon-picker'.

8 import { IconPickerModule } from 'ngx-icon-picker';

Here's the line I used in my package.json.

"ngx-icon-picker": "tech-advantage/ngx-icon-picker#2a8ca57",

I checked to ensure it was installed...

└─[$] <git:(master*)> npm ls | grep icon
421:│ │ ├─┬ cosmiconfig@5.2.1
778:│ │ │ ├── cosmiconfig@5.2.1 deduped
1361:│ │ │ │ │   │ ├─┬ iconv-lite@0.4.24
1521:│ │ │ │   │ ├─┬ iconv-lite@0.4.24
1875:│ │ │ ├── iconv-lite@0.4.24 deduped
1932:│ │ │ │ │ └── iconv-lite@0.4.24 deduped
2229:│ │ ├─┬ iconv-lite@0.4.24
2237:│ │ │ ├── iconv-lite@0.4.24 deduped
2428:├─┬ ngx-icon-picker@1.0.0 (github:tech-advantage/ngx-icon-picker#2a8ca5719bdd45a74c8c24130772b110a69cd0c7)

Do I need to download and "build" the component locally and install from that? I'm not sure why it's claiming it doesn't exist. It is still in my node_modules folder as well.

Thanks!

[BallisticPain]

Okay ... upon further investigation, this might be due to needing to clean out my package-lock.json ... went ahead and ran this command rm -rf node_modules package-lock.json && npm install. I'm awaiting the results. I'll post again soon ... hopefully with results of the test.

Edit: That did not work to resolve it not "finding" the module. Despite showing in the node_modules directory and also with npm ls.

[BallisticPain]

Okay, I'm going to try to clone and build it locally and use that... maybe that's the issue is that it's not "built" in the branch (which I understand).

[greg7859]

We don't push the build on github. We validate our change with our example. When all is all right, we deploy on npm. If you want I can deploy this version on npm.

[greg7859]

I merged the branche to deploy a new version. You will open an issue if you want I change something.

[greg7859]

This issue is available on the 1.1.0 released on npm

[BallisticPain]

@greg7859 Ah okay so I did need to bring it local to build. I didn't get to finish that process, but I'm ready to if needed. I'll test now. Thanks for publishing the fix!

[BallisticPain]

@greg7859 Thanks! It works well!