Readonly flag does not cover country selector in phone-number component

💬 App Building
1
  1. My goal:
    I want to display readonly view which also displays a phone number field.
  2. Issue:
    Even in readonly mode it's possible to select country and it will visibly change phone prefix number. Desired behavior - it should not be possible to change country similar to how it's not possible to edit text.
  3. Steps I've taken to troubleshoot:
    Checked all attributes and tried to go over javascript API, but found nothing useful. Tried to fix country, but that also did not work (on page load, set fixed country code to the phone number from the dataset - flag is not changed, and always displays US).
    Disabled flag will work because it breaks UI style - it will gray out the component.
  4. Additional info: (Cloud or Self-hosted, Screenshots)
    Self hosted.
    image
    image301×386 15.5 KB
2

Unfortunately, I can't change my post.

  • Fix: Disabled flag will not work
3

Hi @Askar_Kalykov, welcome to the community forum!

I was able to reproduce this on my end, so I agree that this is an issue. I went ahead and submitted a bug report for this, so you can follow its progress here as we will update this thread with any news.

I'm not aware of a workaround for now, unless you are interested in trying to make a custom component, potentially with a library like this or this.

1 Like