Duplicate values lead to unindented values

[mflanagan]

I have two separate child elements that have the same name and value. When displayed, the duplicates don't seem to be indented correctly.

import Treeselect from './treeselect-js.js';

// The duplicate values are: "Did not surface at 15m-y-flags". The first one is indented correctly, but the other has
// no indentation.
const options = [
   {
      name: 'Freestyle',
      value: 'Freestyle',
      children: [
         {
            name: 'Pushed off bottom',
            value: 'Pushed off bottom',
            children: []
         },
         {
            name: 'Did not surface at 15m-y-flags',
            value: 'Did not surface at 15m-y-flags',
            children: []
         }
      ]
   },
   {
      name: 'Backstroke',
      value: 'Backstroke',
      children: [
         {
            name: 'On stomach',
            value: 'On stomach',
            children: []
         },
         {
            name: 'Non-continuous flip turn',
            value: 'Non-continuous flip turn',
            children: []
         },
         {
            name: 'Did not surface at 15m-y-flags',
            value: 'Did not surface at 15m-y-flags',
            children: []
         }
      ]
   },
];

const domEl = document.querySelector('.treeselect-test');
const treeselect = new Treeselect({
   parentHtmlContainer: domEl,
   value: [],
   options: options,
   alwaysOpen: true,
   openLevel: 1,
   appendToBody: true,
   listSlotHtmlComponent: null,
   disabled: false,
   emptyText: 'No data text'
});

treeselect.srcElement.addEventListener('input', (e) => {
   console.log(e.detail)
});

[dipson88]

Hi @mflanagan. Thank you for comment! I think we should avoid duplicated values. We can use duplicated names, but id(value) should be unique, because it leads to the not clear behavior. In new version I added a console error with the list of duplicated values. Also I added description to the readme file. If you use unique values - your padding problem will be solved. What do you think? You can try to different strings for 'value' and 'name'.

const options = [
  {
     name: 'Freestyle',
     value: 'Freestyle',
     children: [
        {
           name: 'Pushed off bottom',
           value: 'Freestyle_PushedOffBottom',
           children: []
        }
     ]
  },
  {
     name: 'First Freestyle',
     value: 'FirstFreestyle',
     children: [
      {
          name: 'Pushed off bottom',
          value: 'FirstFreestyle_PushedOffBottom',
          children: []
      }
    ]
  }
]

[mflanagan]

I agree.

One thought: I could see that a name should not be duplicated, but a value could. Perhaps the user wants two or more different keys (names) to resolve to the same value. The value is repeated in two different sections to make things easier for the user. If you were to do that (and that's just syntactic sugar for the user; you'd be fine preventing it), you could add an option to signal that the developer knows he/she is using a duplicate value. But as I said, that's just gravy...your original suggestion would work fine.

Thanks. This is a wonderful tool.

[dipson88]

@mflanagan Thank you for your opinion. I agree with you; it looks like an interesting ability. I'm going to add an investigation of this feature to the TODO list. I will return to this question after more major things (issues from TODO) will be resolved.