# Toggle A DropDown Menu

**URL:** <https://forums.fusetools.com/t/toggle-a-dropdown-menu/3280>\
**Category:** General\
**Created:** [June 14, 2017, 6:53am UTC](https://forums.fusetools.com/t/toggle-a-dropdown-menu/3280 "2017-06-14T06:53:24Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![arwa.tayeb](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/arwa.tayeb/32/47_2.png) [@arwa.tayeb](https://forums.fusetools.com/u/arwa.tayeb)\
**Post date:** [June 14, 2017, 6:53am UTC](https://forums.fusetools.com/t/toggle-a-dropdown-menu/3280/1 "2017-06-14T06:53:24Z")

</div>

Hi everyone. This my drop down menu component

```auto
<Panel ux:Class="DropdownMenu" ux:Name="menu" BackgroundColor="#FFF" BorderColor="#BBB" TextColor="#333333" FontSize="14">
  <!-- PROPERTIES -->
  <object ux:Property="ListItems" />
  <string ux:Property="Selected" />
  <string ux:Property="Text" />
  <float4 ux:Property="TextColor" />
  <Brush ux:Property="BackgroundColor" />
  <Brush ux:Property="BorderColor" />
  <float ux:Property="FontSize" />

  <!-- JAVASCRIPT -->
  <JavaScript>
  var Observable = require('FuseJS/Observable');

  var selected = Observable();

  function onSelected(arg) {
    selected.value = arg.data.name;
    //console.log(menu.Selected);
  }

  module.exports = {
    selected: selected,
    onSelected: onSelected
  }
  </JavaScript>

  <Panel ux:Class="DropdownOption" ux:Name="self" Height="40">
    <string ux:Property="Text" />
    <Brush ux:Property="BackgroundColor" />
    <Brush ux:Property="BorderColor" />
    <float ux:Property="FontSize" />
    <float4 ux:Property="TextColor" />
    <Rectangle Layer="Background" ux:Name="bgCol" Fill="{ReadProperty self.BackgroundColor}">
      <Stroke Brush="{ReadProperty self.BorderColor}" Width="1" />
    </Rectangle>
    <Text Margin="0,0,10,0" Font="Regular" Alignment="CenterRight" Value="{ReadProperty self.Text}" FontSize="{ReadProperty self.FontSize}" Color="{ReadProperty self.TextColor}" />

  </Panel>

  <DockPanel Clicked="{onSelected}" ux:Class="DropdownSelectedItem" ux:Name="self" Height="40" >
    <string ux:Property="Text" />
    <Brush ux:Property="BackgroundColor" />
    <Brush ux:Property="BorderColor" />
    <float ux:Property="FontSize" />
    <float4 ux:Property="TextColor" />
    

    <Image Dock="Right" File="../Assets/Icons/unfold-more.png" Color="{ReadProperty self.TextColor}" Width="24" Height="24" Margin="0" />

    <Text Margin="0,0,10,0" Font="Regular" FontSize="{ReadProperty self.FontSize}" Color="{ReadProperty self.TextColor}" Alignment="CenterRight" Value="{ReadProperty self.Text}" />

    <Panel Layer="Background">
      <Rectangle Layer="Background" Fill="{ReadProperty self.BackgroundColor}" Height="100%" Alignment="Top">
        <!--Stroke Brush="{ReadProperty self.BorderColor}" Width="1" /-->
      </Rectangle>
    </Panel>
  </DockPanel>

  <!-- PANEL CONTAINING EVERYTHING -->
  <Panel Width="100%" Height="40">
    <DataBinding Target="menu.Selected" Key="selected" />
    <Rectangle>
      <Stroke Brush="{ReadProperty menu.BorderColor}" Width="1" />
    </Rectangle>
    <DropdownSelectedItem TextColor="{ReadProperty menu.TextColor}" FontSize="{ReadProperty menu.FontSize}" Text="{selected}" BackgroundColor="{ReadProperty menu.BackgroundColor}" BorderColor="{ReadProperty menu.BorderColor}" />
    <Clicked>
      <Toggle Target="expandDropdown" />
    </Clicked>
    
    <WhileTrue ux:Name="expandDropdown">
      <StackPanel Offset="0,40" >
        <Each Items="{ReadProperty menu.ListItems}" >
          <DropdownOption FontSize="{ReadProperty menu.FontSize}" TextColor="{ReadProperty menu.TextColor}" Text="{name}" BackgroundColor="{ReadProperty menu.BackgroundColor}" Clicked="{onSelected}" BorderColor="{ReadProperty menu.BorderColor}" />
        </Each>
      </StackPanel>
    </WhileTrue>
  </Panel>

</Panel>

```

When the menu is clicked, the user could click any where and the menu still would be expanded, even when redirected to another page.

i am trying to toggle any instance from that dropdown menu. How can that be acheived?

P.S: I tried to add `whileNotFocused` on the component to toggle `expandDropdown` but with no luck.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [June 14, 2017, 8:00am UTC](https://forums.fusetools.com/t/toggle-a-dropdown-menu/3280/2 "2017-06-14T08:00:12Z")

</div>

Hi Arwa,

could you please post a complete reproduction that one could copy-paste and run? It’s hard to suggest a solution without seeing how you use the component.

A single-UX-file app would be nice and shouldn’t be too hard to put together.

---

<div class="post-metadata">

**Author:** ![arwa.tayeb](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/arwa.tayeb/32/47_2.png) [@arwa.tayeb](https://forums.fusetools.com/u/arwa.tayeb)\
**Post date:** [June 14, 2017, 8:50am UTC](https://forums.fusetools.com/t/toggle-a-dropdown-menu/3280/3 "2017-06-14T08:50:52Z")

</div>

```auto
<Page ux:Class="Projects" Background="#e8eaed">  
	<JavaScript>
    var Observable = require('FuseJS/Observable');

    var organizationsOptions = Observable({name: "First Option"}, {name: "First Option"}, {name: "First Option"});
    var tagsOptions = Observable({name: "First Option"}, {name: "First Option"}, {name: "First Option"});

    module.exports = {
    organizationsOptions: organizationsOptions,
    tagsOptions: tagsOptions
  };
  </JavaScript>
  <DockPanel>
    <Grid Columns="1*,1*" Dock="Top">
      <DropdownMenu ux:Name="dropOne" Text="organization" ListItems="{organizationsOptions}" Selected="{selectedOrg}" TextColor="#FFF" BackgroundColor="#333333" BorderColor="#000" />
      <DropdownMenu ux:Name="dropTWo" Text="tag" ListItems="{tagsOptions}" Selected="{selectedTag}" TextColor="#FFF" BackgroundColor="#333333" BorderColor="#000" />
    <Grid>
  </DockPanel>
</Page> 

```

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [June 14, 2017, 9:49am UTC](https://forums.fusetools.com/t/toggle-a-dropdown-menu/3280/4 "2017-06-14T09:49:48Z")

</div>

Hi Arwa,

if the question is “how to close the dropdown when I click outside of it”, then the answer to that is: you need to add an overlay (underlay?) `Panel` that covers the whole screen behind the dropdown and has a `Clicked` handler on it that toggles the expanded state.

---

<div class="post-metadata">

**Author:** ![Kwame](https://avatars.discourse-cdn.com/v4/letter/k/2bfe46/32.png) [@Kwame](https://forums.fusetools.com/u/Kwame)\
**Post date:** [October 31, 2017, 9:00pm UTC](https://forums.fusetools.com/t/toggle-a-dropdown-menu/3280/5 "2017-10-31T21:00:50Z")

</div>

I was first able able to get the Panel over/underlay to work as expected (Test\_Combox.ux: 57 - 62), but I now realize that with several comboboxes I need an outside click to close all drop downs.

As an attempt I’ve created a invisible, `Opacity` is 0, `Panel` in `Test_Combox_Instance.ux` that is supposed to set the `toggle` observable to `false`. The `Combobox` class has `toggle` as a ux:Property. My hope was that a click on the invisible Panel would change the `toggle` property value, which would propagated to all `Combobox` instances and be used to close their dropdown lists.

However, I recieve

```auto
{toggle} is not a valid property path - /.../Test_Combobox_Instance.ux(1:1):E

Object reference not set to an instance of an object - (0:0):E

```

My question, aside from what is recommended practice here, is how can I make the `toggle` property be available within a `Panel` and actionable by `Set`. I’ve tried `{Toggle}`, `{toggle.value}`, etc, getting errors about not being in scope, or not being a valid property path.

Any thoughts?

- [Test\_Combobox\_Instance.ux](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/Qz3OsyizH2D5-image-1509482835737.ux)

- [Test\_Combobox.js](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/wD9I6YaoGsaA-image-1509482843200.js)

- [Test\_Combobox.ux](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/gDAOHVuenbHR-image-1509482846856.ux)

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [November 1, 2017, 1:12pm UTC](https://forums.fusetools.com/t/toggle-a-dropdown-menu/3280/6 "2017-11-01T13:12:16Z")

</div>

All you need to do is leave the setting of `toggle` value to JavaScript.

E.g., in UX:

```auto
<Tapped>
    <Callback Handler="{changeToggle}" />
</Tapped>

```

and in JS:

```auto
// ...
var Observable = require("FuseJS/Observable");
var toggle = Observable(false);
function changeToggle() {
    toggle.value = ! toggle.value;
}
// ...
module.exports = {
    // ...
    toggle: toggle,
    changeToggle: changeToggle
};

```

---

<div class="post-metadata">

**Author:** ![Kwame](https://avatars.discourse-cdn.com/v4/letter/k/2bfe46/32.png) [@Kwame](https://forums.fusetools.com/u/Kwame)\
**Post date:** [November 2, 2017, 4:34pm UTC](https://forums.fusetools.com/t/toggle-a-dropdown-menu/3280/7 "2017-11-02T16:34:12Z")

</div>

Thank you Uldis, with you hint above I was able to add something to the effect of:

Test\_Combobox\_Instance.ux 31-38, after the `StackPanel`

```auto
  <Panel Color="#FFF" Opacity="0" Layer="Underlay">
      <Tapped>
        <Callback Handler="{set_bg_clicked_true}" />
        <DebugAction Message="{bg_clicked}" />
      </Tapped>
  </Panel>
</Panel>

```

Test\_Combobox.ux: 19-23, after the `Tapped` UX in the `Panel`

```auto
			<WhileTrue Value={bg_clicked}>
				<Set thePopup.Value="false" />
		        <DebugAction Message="bg_clicked: {bg_clicked}, setting to false" />
		        <Callback Handler="{set_bg_clicked_false}" />
			</WhileTrue>

```

with `set_bg_clicked_false` simply setting `bg_clicked = false`. This implements, for the most part (some minor layer related hitbox interactions), outside clicking to reset the dropdown. Thanks!