How to handle click on color square but not on color picker open

[Kaine]

When using the SfColorPicker how can I perform an action when the coloured side of the split button is clicked in a way that doesn't trigger when the SfColorPicker is opened using the other side?

    <SfColorPicker @ref="colorPicker" @onclick="ColourClick" Mode="ColorPickerMode.Palette"  ModeSwitcher="false" ShowButtons="false" EnableOpacity="false" PresetColors="@myColours" Value="@colourString" ValueChanged="ColourPicked"></SfColorPicker>

I have tried using the onclick - and this allows me to detect a click and perform a process - but this process is also called when the user opens the picker to select a colour and I can't figure out how to prevent it triggering in this case. What is the correct way to handle this?

[Gayathri KarunaiAnandam]

Hi Kaine, 

We have checked your reported query.  We would like to let you know that the onclick event is native event which triggers for the whole component. In ColorPicker component, we have ValueChange event which triggers when the color is changed in the popup. Please check the below code snippet. 

Code snippet: 

 

@using Syncfusion.Blazor.Inputs 

 

 

<SfColorPicker @ref="colorPicker" Mode="ColorPickerMode.Palette" OnOpen="Open" Selected="Selected" ModeSwitcher="false" ShowButtons="false" EnableOpacity="false" PresetColors="@customColors" ValueChange="ColourPicked"> 

 

</SfColorPicker> 

 

 

@code{ 

 

    SfColorPicker colorPicker; 

 

    private void ColourPicked(ColorPickerEventArgs args) 

    { 

 

    } 

 

    private void Open() 

    { 

 

    } 

 

    private void Selected(ColorPickerEventArgs args) 

    { 

 

    } 

 

    private Dictionary<string, string[]> customColors = new Dictionary<string, string[]> { 

    { "Custom", new string[] { "#ef9a9a", "#e57373", "#ef5350", "#f44336", "#f48fb1", "#f06292", 

                "#ec407a", "#e91e63", "#ce93d8", "#ba68c8", "#ab47bc", "#9c27b0", "#b39ddb","#9575cd", 

                "#7e57c2", "#673AB7", "#9FA8DA", "#7986CB", "#5C6BC0", "#3F51B5", "#90CAF9", "#64B5F6", 

                "#42A5F5","#2196F3", "#81D4FA", "#4FC3F7", "#29B6F6", "#03A9F4", "#80DEEA", "#4DD0E1", 

                "#26C6DA", "#00BCD4", "#80CBC4", "#4DB6AC", "#26A69A", "#009688","#A5D6A7", "#81C784", 

                "#66BB6A", "#4CAF50", "#C5E1A5", "#AED581", "#9CCC65", "#8BC34A", "#E6EE9C","#DCE775", 

                "#D4E157", "#CDDC39" } 

    } 

   }; 

 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/164645/ze/BlazorApp11350631554 

Api Link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ValueChange 

Please check the above sample and get back to us, if you need further assistance. 

Regards, 

Gayathri K