ColorPicker not displayed properly

[Jonas Czeslik]

Hello Syncfusion team,

I am having some issues with the color picker. I have a generic dialogItemComponent that - depending on meta data - can become a textbox, datepicker, dropdown, ... or a in this case a color picker. Here a little extract from the HTML

        <button *ngIf="dialogItem['type']==='button'" class="menu_links, samplebtn e-control e-btn e-primary"

        (click)="delegateSettingChange($event, dialogItem['id'], dialogItem['type'])">{{dialogItem['label']}}</button>

        <ejs-checkbox *ngIf="dialogItem['type']==='checkbox'" #checkbox label='{{dialogItem["label"] + suffix}}'

        [checked]="dialogItem['checked']" (change)="delegateSettingChange($event, dialogItem['id'], dialogItem['type'])"></ejs-checkbox>

        <div *ngIf="dialogItem['type']==='colorpicker'">

            <label *ngIf="dialogItem['type']==='colorpicker'" for="dialogItem['id']">{{dialogItem["label"] + suffix}} </label>

            <input #colorpicker ejs-colorpicker formControlName="usedForm" *ngIf="dialogItem['type']==='colorpicker'" value="{{dialogItem['value']}}"

                (open)="onOpenColorPicker($event)" (change)="delegateSettingChange($event, dialogItem['id'], dialogItem['type'])"

                type="color" id={{dialogItemId2}}/>

        </div>

These dialog items are then wrapped in a dialog component, which can be created easily by defining a little JSON config, so I can create my dynamic dialog based on the config. 

This indeed always worked out, but now I found a bug that did not let me open the color picker in a specific spot. 


In the sample above, you can see such a dynamic dialog and here it works perfectly fine. I can open the color picker and it lets me chose different colors triggering the change event.

In the second sample (below), it does not work and just puts a buggy color picker in the top left corner.

When I hit the arrow button, it raises the error:

ERROR TypeError: Cannot read properties of undefined (reading 'toString')

    at FormBase.hex 
    [...]

And when I hit the color button, it raises the error

ERROR TypeError: Cannot read properties of null (reading 'slice')

    at SplitButton.click
    [...]

That confuses me because I can log the dialog component and and the color picker is in it:



I hope that is sufficient information to determine the type of error.

Thanks in regard
Jonas Czeslik

[Gayathri KarunaiAnandam]

Hi Jonas,

We have validated your code snippet and screenshot. Based on your code, we have tried to replicate the issue. But we are unable to replicate the issue at our end. Please check the below sample.

Sample: https://stackblitz.com/edit/angular-w7njha?file=app.component.html

We would like to know the below details to proceed further,

• Share Colorpicker component open and change event related TS code snippet.

• If possible, replicate the reported in above sample or share simple replicable sample.

• Share video demonstration of the issue.

• Share Syncfusion version you are using.

Based on the above requested information, we will check and update promptly.

Regards,

Gayathri

[Jonas Czeslik]

Hi,

I found the problem! In the color picker that caused the problem, the picker was filled with a value that somehow was undefined, so the problem always appears with an undefined color value. I added a safety mechanism to ensure that these color pickers will always have a valid color value

[Gayathri KarunaiAnandam]

Hi Jonas,

We should provide a hex code in value field. Please check the below API link.

https://ej2.syncfusion.com/angular/documentation/api/color-picker/#value

Please get back to us if you need further assistance.

Regards,

Gayathri K