Plug in drop down is not working

Adobe XD UXP Plugin API
1

My plugin drop-down stopped working this week. Is anyone else experiencing similar issues?

I have a drop-down that allows me to reorder items. When I use the dropdown, the items do re-order, but the number in the item remains the same. I don’t know how to fix this or what is wrong with it. What can I do? Please advise!

1 Like
2

May I ask on which platform (Windows or macOS) and in which version of XD, you’re experiencing this issue?

Furthermore, how does (or should) your drop-down allow for reordering items? This sounds like something custom (a standard <select> element wouldn’t allow for reordering items, as far as I know), meaning we’ll probably need to see some sort of code (of course, not necessarily the whole plugin, but the relevant sections) in order to help…

Thank you very much in advance :slight_smile::+1:

3

Any code, snippets, screenshots, and recordings you have would also be useful! :slight_smile:

4

version 22.1.12.5

MAC

 <select value={i} onChange={(e)=> props.onChange(e, role)}>
          {Array(total).fill(0).map((item, i)=> {
            return (<option key={i} value={i}>{i + 1}</option>);
          })}
        </select>

          <div className="">
            {landmark.roles.map((role, i) => {
              return (
                <LandmarkField
                  key={i}
                  role={role}
                  i={i}
                  total={landmark.roles.length}
                  onChange={props.onTabChange}
                  onDelete={() => props.onDelete(role)}
                />
              );
            })}
          </div>```
5

ally%20dropdown%20
ally%20dropdown%20306×667 139 KB

6

I think that one thing that could be problematic here (although I’m not sure if it’ll fix the problem) is having the key be the index. As React (to my understanding) checks whether the DOM has to get updated based on the question if the element has changed (i.e., here, if the key has changed), having the key stay the same (the fourth element will still have 3 as its key) could lead to React determining that it doesn’t have to update this aspect of the DOM, leaving it in the state as shown by your screenshot. In general, though, having the index as a key isn’t necessarily a good idea when you can manipulate items (as it basically defeats the purpose of it).

Could you try to change the key to something different, e.g., a JSON.stringify version of role and item (or, for testing, leave it out), and report what happens?