Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Tumbler select event fired 3 times

Why is tumbler firing 3 select events with the code below? Following output is in the Console:

[21:25:00]index: 1, value: 02
[21:25:00]index: 1, value: 02
[21:25:00]index: 1, value: 02

 

index.js

import document from "document";

let tumbler = document.getElementById("tumbler");

tumbler.addEventListener("select", function(evt) {
 console.log("index: " + getSelectedIndex() + ", value: " + getSelectedValue());
})

function getSelectedIndex() {
  return tumbler.value;
}

function getSelectedValue() {
  return tumbler.getElementById("item" + tumbler.value).getElementById("content").text;
}

index.gui

<svg viewport-fill="fb-cyan">
  <use id="tumbler" href="#tumblerview">
    <use id="item0" href="#tumbler-item" class="item">
      <text id="content">01</text>
    </use>
    <use id="item1" href="#tumbler-item" class="item">
      <text id="content">02</text>
    </use>
    <use id="item2" href="#tumbler-item" class="item">
      <text id="content">03</text>
    </use>
    <use id="item3" href="#tumbler-item" class="item">
      <text id="content">04</text>
    </use>
    <use id="item4" href="#tumbler-item" class="item">
      <text id="content">05</text>
    </use>
    <use id="item5" href="#tumbler-item" class="item">
      <text id="content">06</text>
    </use>
    <use id="item6" href="#tumbler-item" class="item">
      <text id="content">07</text>
    </use>
    <use id="item7" href="#tumbler-item" class="item">
      <text id="content">08</text>
    </use>
    <use id="item8" href="#tumbler-item" class="item">
      <text id="content">09</text>
    </use>
    <use id="item9" href="#tumbler-item" class="item">
      <text id="content">10</text>
    </use>
  </use>
</svg>

widget.gui

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
    <!-- Additional Imports -->
    <link rel="import" href="/mnt/sysassets/widgets/baseview_widget.gui" />
    <link rel="import" href="/mnt/sysassets/widgets/tumblerview_widget.gui" />
  </defs>
</svg>
Best Answer
0 Votes
2 REPLIES 2

This was working fine and suddenly it stopped working all together. Does anyone having same issues?

Best Answer
0 Votes
tumbler.addEventListener("select", function(evt) {}

Dit this really work?
The only think I can find about select events is a mention that it is not available in the panorama view (https://dev.fitbit.com/build/guides/user-interface/svg-components/views/#panorama-view). Does this mean there are components where it is available?

Best Answer
0 Votes