# Dashboard 2.0 workaround for issue #331 - dropdown problem on Android?

**URL:** <https://discourse.nodered.org/t/dashboard-2-0-workaround-for-issue-331-dropdown-problem-on-android/85141>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [2 February 2024 10:10 UTC](https://discourse.nodered.org/t/dashboard-2-0-workaround-for-issue-331-dropdown-problem-on-android/85141 "2024-02-02T10:10:49Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [2 February 2024 10:10 UTC](https://discourse.nodered.org/t/dashboard-2-0-workaround-for-issue-331-dropdown-problem-on-android/85141/1 "2024-02-02T10:10:49Z")

</div>

Can anyone think of a workaround for [ui-dropdown allows keyboard text entry and misbehaves on Android. · Issue #331 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/331)? On Android selecting a dropdown pops up a keyboard, which makes it virtually unusable in landscape mode as the keyboard takes a lot of screen so there is little room for the selection. For example:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/c/bc5dff2329d5d7a3a7e1d62054070e2ae739b71e.png)

Even if I close the keyboard it keeps popping up again.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [2 February 2024 10:52 UTC](https://discourse.nodered.org/t/dashboard-2-0-workaround-for-issue-331-dropdown-problem-on-android/85141/2 "2024-02-02T10:52:39Z")

</div>

This might be one for the [Veutify Discord community](https://community.vuetifyjs.com/).

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [2 February 2024 10:53 UTC](https://discourse.nodered.org/t/dashboard-2-0-workaround-for-issue-331-dropdown-problem-on-android/85141/3 "2024-02-02T10:53:21Z")

</div>

I see that there is an `input` element involved in dropdown for regular usage it is not needed/used. The one can add "readonly" attribute for that input. Should suppress keyboard popping up.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [2 February 2024 10:56 UTC](https://discourse.nodered.org/t/dashboard-2-0-workaround-for-issue-331-dropdown-problem-on-android/85141/4 "2024-02-02T10:56:35Z")

</div>

I _think_ the correct (modern) way is to apply the `inputmode` attribute...

```auto
inputmode='none'

```

... to the input element.

But as this is a vuetify component, that _might be_ tricky without using a $ref to manipulate the element?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [2 February 2024 11:31 UTC](https://discourse.nodered.org/t/dashboard-2-0-workaround-for-issue-331-dropdown-problem-on-android/85141/5 "2024-02-02T11:31:06Z")

</div>

@Steve-Mcl @hotNipi are those changes that would need to be made in the dropdown node source?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [2 February 2024 11:34 UTC](https://discourse.nodered.org/t/dashboard-2-0-workaround-for-issue-331-dropdown-problem-on-android/85141/6 "2024-02-02T11:34:49Z")

</div>

From a very VERY quick cursory glance I _think_ the dropdown built by veutify employs an input element (possibly for the focusing and/or key typed selection) (IDK) but that is the thing that needs to be told not to pop out the on screen keyboard.

They may already have a way of specifying this in the v-dropdown (I havent looked). It may be possible via a class (at your end)

Thats all i have until i have more time I'm afraid. the Veutify discourse probably has this answered already.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [2 February 2024 12:09 UTC](https://discourse.nodered.org/t/dashboard-2-0-workaround-for-issue-331-dropdown-problem-on-android/85141/7 "2024-02-02T12:09:45Z")

</div>

You may try to hack it a bit that way...  
Cant currently test on device..

```auto
<script>
   const dropdowns = document.querySelectorAll('.nrdb-ui-dropdown');   
   for (const d of dropdowns) {
      const input = d.querySelector('input');
      input.setAttribute("readonly", "")      
   }  
</script>

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/4/14ebb31939170ffd88f74ececf889f3792645bd4.png)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [2 February 2024 12:25 UTC](https://discourse.nodered.org/t/dashboard-2-0-workaround-for-issue-331-dropdown-problem-on-android/85141/8 "2024-02-02T12:25:58Z")

</div>

> [@hotNipi](#):
>
> You may try to hack it a bit

You, sir, are a genius"!

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [2 February 2024 12:30 UTC](https://discourse.nodered.org/t/dashboard-2-0-workaround-for-issue-331-dropdown-problem-on-android/85141/9 "2024-02-02T12:30:44Z")

</div>

The script should be targeted to be `ui-scoped` to affect at all pages. (if you have more than one)  
My bad. Sorry. Not that genius at all 😃

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [2 February 2024 16:03 UTC](https://discourse.nodered.org/t/dashboard-2-0-workaround-for-issue-331-dropdown-problem-on-android/85141/10 "2024-02-02T16:03:59Z")

</div>

Even a genius may not perfect 🙂

For example, Einstein said for a long time that the theory of quantum mechanics could not be true, but eventually changed his mind.

---

<div class="post-metadata">

**Author:** ![TheSaltydog](https://avatars.discourse-cdn.com/v4/letter/t/47e85d/32.png) [@TheSaltydog](https://discourse.nodered.org/u/TheSaltydog)\
**Post date:** [2 February 2024 16:30 UTC](https://discourse.nodered.org/t/dashboard-2-0-workaround-for-issue-331-dropdown-problem-on-android/85141/11 "2024-02-02T16:30:16Z")

</div>

> [@Colin](#):
>
> Einstein said for a long time

That "spooky action at a distance"?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [2 February 2024 16:33 UTC](https://discourse.nodered.org/t/dashboard-2-0-workaround-for-issue-331-dropdown-problem-on-android/85141/12 "2024-02-02T16:33:55Z")

</div>

And the cat.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [2 February 2024 16:51 UTC](https://discourse.nodered.org/t/dashboard-2-0-workaround-for-issue-331-dropdown-problem-on-android/85141/13 "2024-02-02T16:51:05Z")

</div>

Dead'n'alive 😺

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [16 February 2024 16:51 UTC](https://discourse.nodered.org/t/dashboard-2-0-workaround-for-issue-331-dropdown-problem-on-android/85141/14 "2024-02-16T16:51:32Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.