# Create a text input from a dropdown list

**URL:** https://community.thunkable.com/t/create-a-text-input-from-a-dropdown-list/1806416
**Category:** Questions about Thunkable X
**Tags:** beginner
**Created:** [March 28, 2022, 4:56pm UTC](https://community.thunkable.com/t/create-a-text-input-from-a-dropdown-list/1806416 "2022-03-28T16:56:07Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![andos-avlog](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/andos-avlog/32/122340_2.png) [@andos-avlog](https://community.thunkable.com/u/andos-avlog)
#### Post date: [March 28, 2022, 4:56pm UTC](https://community.thunkable.com/t/create-a-text-input-from-a-dropdown-list/1806416/1 "2022-03-28T16:56:07Z")

</div>

Hi, I have a very small List View (\*\*FRListView)\*\*containing 3 items: the first a blank item ( **no text** ); the second has the text value “ **FRAME** ”; and the 3rd has the text value “ **REG** ”.

I wish to use this List Viewer as a **dropdown menu**. But I also want the **List Viewer box** to be the same size as the other text boxes.

This List Viewer is to be situated situated amongst six Text Input Boxes and replace the current Text Input named “AddText\_InputFR” (shown as Frame or Reg in the image below).

 ![FRDROPDOWN](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/9/1910c7363f913190b494c17d77020c7d6c8e653d.png)

The results I have found in the Community only seem to cover selecting an item from the **dropdown to create a message elsewhere on the screen.**

I have tried copying the blocks from the results and applying them to my needs but I can’t get them to work.

What I am trying to do is this:

As mentioned above, the dropdown menu will only contain 3 values: **a blank cell** ;space; “ **FRAME** ” and “ **REG** ”

When screen opens, the user will be presented with a blank input box which will contain the dropdown menu. Which will be presented to the user as closed. When the blank input box is clicked, the dropdown menu will appear. The user will click on one of the text values and the dropdown menu will disappear leaving only the selected item showing in the input box. This text must be able to be entered like regular text into the Source Google Sheet just like the values in the other text input boxes showing

I wish to use the **this box to replace the regular text input box currently present**. (As shown above).

Any help to resolve this would be greatly appreciated.

I hope I have explained this correctly.

Andos.

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [March 28, 2022, 6:21pm UTC](https://community.thunkable.com/t/create-a-text-input-from-a-dropdown-list/1806416/2 "2022-03-28T18:21:57Z")

</div>

That’s pretty much what I’ve done here:

> [@\[Solved\] How to Create Drop down list](https://community.thunkable.com/t/solved-how-to-create-drop-down-list/1234018/6):
>
> Here you go: [https://x.thunkable.com/copy/284892e1a4b75fbfdb4ae67e938bf919](https://x.thunkable.com/copy/284892e1a4b75fbfdb4ae67e938bf919) [image] [image]

You’d just need to modify it to appear closed when the screen starts. I would probably hide the list viewer and show a button that looks like it is closed. Then when the button is clicked, show the list viewer and hide the button. Unfortunately, that means the user would have to click twice (once on the button and then once on the list viewer) to see the choices. It’s a shame that Thunkable doesn’t have better mouse up/mouse released/mouse down detection events.

There are lots of other examples on the forums:

> [@Drop down lists in Thunkable X](https://community.thunkable.com/t/drop-down-lists-in-thunkable-x/1556715):
>
> Helping a couple of middle schoolers code an app using thunkable and they love it. We are struggling with the drop down list - they want a user to select from different vehicle types on a form I looked at [Drop-down Menu/Spinner Tutorial](https://community.thunkable.com/t/drop-down-menu-spinner-tutorial/75745) but it is using options that are not available like from - maybe we are missing something basic but is there a newer or different way to do this now? Thx M

> [@Drop-down Menu/Spinner Tutorial](https://community.thunkable.com/t/drop-down-menu-spinner-tutorial/75745):
>
> This post will display two ways to make a drop-down menu in your Thunkable X app. In Thunkable Classic, this feature was called a Spinner. This tutorial will recreate the Spinner using two methods: in one, a List Viewer will be used. In the other, a List Viewer plus a Button will be used. Method 1 has fewer Layout components. Method 2 is more suited to displaying the currently selected item at the top of the list, and as such would be more suitable for a longer list. The app can be accessed [h…](https://x.thunkable.com/projectPage/5c1f9a8e683aa24e530a86cc)

---

<div class="post-metadata">

### Author: ![andos-avlog](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/andos-avlog/32/122340_2.png) [@andos-avlog](https://community.thunkable.com/u/andos-avlog)
#### Post date: [March 28, 2022, 6:45pm UTC](https://community.thunkable.com/t/create-a-text-input-from-a-dropdown-list/1806416/3 "2022-03-28T18:45:19Z")

</div>

Hi @tatiang, I had already looked at that post but couldn’'t quite grasp it. I also tried another post link within that post and got completely muddled up. See my blocks below:

 ![frBLOCKS](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/8/5897d3c1a0c801c0654d5802d985fa725f80bc0a.png)

Also the size of the dropdown menu was way too big for my requirements.

When I tried your blocks, the dropdown menu stayed open. How would I close display it as closed?

I am going to try your blocks again. Then I will ask you how complete the rest of the process.

Many thanks,

Andos.

---

<div class="post-metadata">

### Author: ![andos-avlog](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/andos-avlog/32/122340_2.png) [@andos-avlog](https://community.thunkable.com/u/andos-avlog)
#### Post date: [March 28, 2022, 7:28pm UTC](https://community.thunkable.com/t/create-a-text-input-from-a-dropdown-list/1806416/4 "2022-03-28T19:28:28Z")

</div>

Hi @tatiang, I have setout the blocks as per you link and I made a button ( **FRBtn** )which looks like a text input field.

**My blocks** :

 ![FRBLOX](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/9/09490bbf29c7bad1e39d5694c1a2647960ef070a.png)

**My button** :

 ![frBTN](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/8/e88fb75788dc093efc045bda0b806723e28bd274.png)

When I click the button the dropdown ( **FRListView** ) appears (how would I make the dropdown look tidier?) See Below:

 ![frBTN-clicked](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/5/d50694413e71a5db91abd14009f62d0243a82eb8.png)

When I click an item on the dropdown menu nothing happens. No selection is made. Nor, does the dropdown list disappear after a selection.

Andos.

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [March 28, 2022, 7:59pm UTC](https://community.thunkable.com/t/create-a-text-input-from-a-dropdown-list/1806416/5 "2022-03-28T19:59:30Z")

</div>

List Viewers are not that aesthetically pleasing. What they are is simple and quick to use. If you want something that looks better, I would go with a Data Viewer List (DVL) or – if you’re using the older Snap to Place (StP) interface instead of the Drag and Drop (DnD) interface, you can use clone blocks to create your own drop-down list. Then you have much more flexibility in terms of how it works and how it looks. But it will be more work!

---

<div class="post-metadata">

### Author: ![andos-avlog](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/andos-avlog/32/122340_2.png) [@andos-avlog](https://community.thunkable.com/u/andos-avlog)
#### Post date: [March 28, 2022, 8:07pm UTC](https://community.thunkable.com/t/create-a-text-input-from-a-dropdown-list/1806416/6 "2022-03-28T20:07:55Z")

</div>

Hi @tatiang, I have got round the size issue by changing the size of the ListViewer and removing the “blank” option from the menu. See below:

 ![dROPDOWN](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/5/1503b4d1b4ebfc09eddf13fe4424c9aa656af839.png)

What am I doing wrong. When I select an item from the dropdown list it won’t select.

Andos.

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [March 28, 2022, 8:09pm UTC](https://community.thunkable.com/t/create-a-text-input-from-a-dropdown-list/1806416/7 "2022-03-28T20:09:41Z")

</div>

> [@andos-avlog](#):
>
> What am I doing wrong. When I select an item from the dropdown list it won’t select.

Can you share your project link with me and specify which screen this is on?

---

<div class="post-metadata">

### Author: ![andos-avlog](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/andos-avlog/32/122340_2.png) [@andos-avlog](https://community.thunkable.com/u/andos-avlog)
#### Post date: [March 28, 2022, 8:15pm UTC](https://community.thunkable.com/t/create-a-text-input-from-a-dropdown-list/1806416/8 "2022-03-28T20:15:16Z")

</div>

Hi @tatiang, here my link:

[https://x.thunkable.com/copy/ec39b0d87b0ee59e4c637726e1c6a4fc](https://x.thunkable.com/copy/ec39b0d87b0ee59e4c637726e1c6a4fc)

I am currently working on the “ **MANFVAddNew** ” screen.

Andos.

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [March 28, 2022, 10:47pm UTC](https://community.thunkable.com/t/create-a-text-input-from-a-dropdown-list/1806416/9 "2022-03-28T22:47:47Z")

</div>

This is what I do in the drop-down demo I posted a link to above:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/c/bcddb6767d015e0247db13239b00c528fc5f49cc.png)

So when the user clicks an item from the list of choices, the list viewer’s text items get set to that single item. And then when the single item is clicked, the list viewer’s text items get set back to the full list of choices.

By default, a list viewer doesn’t “do” anything when you click on an item except store the text of the item in the green `item` block and the row number of the item in the green `index` block. It doesn’t close or change the appearance of the component. That’s why I had to figure out another way to do it.

---

<div class="post-metadata">

### Author: ![andos-avlog](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/andos-avlog/32/122340_2.png) [@andos-avlog](https://community.thunkable.com/u/andos-avlog)
#### Post date: [March 29, 2022, 2:23pm UTC](https://community.thunkable.com/t/create-a-text-input-from-a-dropdown-list/1806416/10 "2022-03-29T14:23:39Z")

</div>

Hi @tatiang,

> [@tatiang](#):
>
> So when the user clicks an item from the list of choices, the list viewer’s text items get set to that single item. And then when the single item is clicked, the list viewer’s text items get set back to the full list of choices.

I, initially, found the above paragraph very confusing. I understand it now.

I was thinking of this workaround…

Based on the first click to select the item from the list, is there a way that the first click could write the “text” from the selected item to an input text field and then close itself?

I asked because the field I was thinking of writing the text to is the “ **AddRecText\_InputFR** ” Text\_Input field located in the " **AddRecBtnSave/ Click** block. (Image below).

 ![ItemClickSendTo](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/f/1f2ed3e8c19a8ed1066fefb7ae5acbac194f1584.png)

By creating a "when Frame is selected from the dropdown menu, enter the text “ **Frame** ” into the “ **AddRecText\_InputFR** ” Text\_Input field function maybe? and obviously the same for when the “ **Reg** ” item is selected.

What do you think?

I can’t help feeling that this is possible but again, I am not sure how to make this work.

Andos.

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [March 29, 2022, 4:26pm UTC](https://community.thunkable.com/t/create-a-text-input-from-a-dropdown-list/1806416/11 "2022-03-29T16:26:49Z")

</div>

> [@andos-avlog](#):
>
> Based on the first click to select the item from the list, is there a way that the first click could write the “text” from the selected item to an input text field and then close itself?

Sure but just to be clear: list viewers can’t “close.” They can be hidden by setting their visible property to false. In the `Item Click` block, assign the green `item` block to a text input’s text value. Then change the list viewer’s visible property to false.

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [March 29, 2022, 5:47pm UTC](https://community.thunkable.com/t/create-a-text-input-from-a-dropdown-list/1806416/12 "2022-03-29T17:47:41Z")

</div>

check this demo

[https://x.thunkable.com/projectPage/5fce83a95373b000115a9279](https://x.thunkable.com/projectPage/5fce83a95373b000115a9279)

---

<div class="post-metadata">

### Author: ![andos-avlog](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/andos-avlog/32/122340_2.png) [@andos-avlog](https://community.thunkable.com/u/andos-avlog)
#### Post date: [March 30, 2022, 2:51pm UTC](https://community.thunkable.com/t/create-a-text-input-from-a-dropdown-list/1806416/13 "2022-03-30T14:51:39Z")

</div>

Thanks @tatiang & @muneer, I tried both suggestions and @muneer’s suggestion worked perfectly.

Here are my resulting blocks:

 ![FRBlox-Solution](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/d/8dc620a0c684c1b08f141b271ac182345cde7bb7.png)

I used @tatiang’s suggestion of using the “ **set FRListView’ s Visible to** ” blocks to achieve the desired visibilty effects and then tweaked the label and column sizes to achieve the perfect aesthetic appearance.

See below:

**Screen loaded**

 ![AddFRScn1png](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/9/a911ff6b4d83b66d5aecdb102c2ea5941984ade0.png)

**Label clicked**

(The actual dropdown perfectly displays the two options on my mobile device)

 ![AddFRScn2png](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/0/a06028ea00585a07e2d5c4eb1c4e45a60311017f.png)

**Item in dropdown clicked**

 ![AddFRScn3png](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/0/f0a9e5c88c12886f20aa20336dc2e450c461a368.png)

Well done guys! Once again, you have come up trumps

Best regards,

Andos.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)
#### Post date: [June 28, 2022, 2:52pm UTC](https://community.thunkable.com/t/create-a-text-input-from-a-dropdown-list/1806416/14 "2022-06-28T14:52:29Z")

</div>

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

---

<div class="post-metadata">

### Author: ![matt\_conroy](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/matt_conroy/32/150843_2.png) [@matt\_conroy](https://community.thunkable.com/u/matt_conroy)
#### Post date: [December 19, 2024, 5:00pm UTC](https://community.thunkable.com/t/create-a-text-input-from-a-dropdown-list/1806416/15 "2024-12-19T17:00:11Z")

</div>


