Color picker hides on android keyboard show/hide

[rommersalting]

If I click on the input text, the popup color picker show but since its an input type, the android keyboard will show and along with it, the popup color picker hides. As shown below. The gif above was accessed using android device from the first example on https://zefoy.github.io/ngx-color-picker/ How do I prevent on closing the popup when the android keyboard shows?

If I click on the input text, the android keyboard will show and when I click on toggle, the popup color picker shows but since I lost focus on the input type, android keyboard will hide and along with it, the popup color picker also hides. As shown below. The gif above was accessed using android device from the toggle example on https://zefoy.github.io/ngx-color-picker/ How do I prevent on closing the popup when the android keyboard hides?

[sconix]

I do not think you can click input without focusing it on a mobile device. So you should use something else as a trigger for opening the dialog than input focusing.

[kcs-renusuthar]

have you found any solution for this? as i am not able to change hex or rgb code from mobile

[Merwan1010]

@kcs-renusuthar @rommersalting

You can prevent the keyboard showing by adding the 'readonly' attribute inside the input tag like this :

<input readonly [(colorPicker)]="color" [style.background]="color"/>

I tested with Ionic 5 on ios and android it seems to be working just fine. Tell me if it also work on your device ! 👍

[kcs-renusuthar]

@kcs-renusuthar @rommersalting

You can prevent the keyboard showing by adding the 'readonly' attribute inside the input tag like this :

<input readonly [(colorPicker)]="color" [style.background]="color"/>

I tested with Ionic 5 on ios and android it seems to be working just fine. Tell me if it also work on your device ! 👍

I tried this but then I am not bale to change Hex or RGB color code from mobile device.

[stanislavSherstiuk]

something new here? still can not change hex on Android/Chrome seems like a bug , not a question even on your demo it is not working. @sconix

[sconix]

My original comment is still valid, you can not use the input as trigger in mobile it just wont work so one needs to do it differently. The demo app has never meant to be working in mobile. So just have input for entering the color and the separate button to open the picker for example. I am not aware of any way hot this could work in mobile with input as the trigger due to the way how mobile browsers work.

[stanislavSherstiuk]

input is the trigger to open keyboard, by default)

[sconix]

Yes thats why I said that you can not use the input as a trigger. So just use input as a regural input and connect color picket opening to some other element.

[jfagan1]

@sconix Could you explain the proper way to achieve what you are describing above? What I am trying to achieve is the ability to change the color within the picker dialog itself on a mobile device. If I tap on the any of the hex, rgb, hsl etc inputs the dialog completely closes. Right now I use a button as the trigger for the picker:

<button class="btn color-picker-button" type="button" [(colorPicker)]="colorPickerColor" [style.background]="colorPickerColor" [cpOutputFormat]="'hex'" [ngStyle]="{'color': 'White' , 'border': '2px solid ' + colorSearch.inputBorderColor, 'border-right': 'none' }" [cpCloseClickOutside]="true" [cpSaveClickOutside]="true" [cpEyeDropper]="true" (colorPickerChange)="onColorPickerChange($event)"> <fa-icon [icon]="faPlus"></fa-icon> </button>

Any help would be highly appreciated. Thanks!

[sconix]

Dont think the comments above are anymore valid since the code to handle the dialog has changed since. Mobile support is not something we need so hence its not tested or provided for, PR's naturally are accepted.

I am guessing that the dialog closes due to some resize even caused by the keyboard etc. I think your best bet is to make your own dialog and embed color picker into it as inline element so you are in full control how the dialog behaves.

[jfagan1]

Thank you for the fast response! Making my own dialog might be a bit too much for me, I was really hoping I could get it to work even if I had to do some custom tweaks in my app. It works great on desktop and even on mobile, it just those inputs that cause an issue.