Event stop returns incorrect store.stored value

[lubomirblazekcz]

What is the problem?

store.stored.length returns 0 when selecting one item, 1 when selecting two, etc. it's one value behind

Please provide the steps to reproduce and create a CodeSandbox.

I am using the vanilla https://codesandbox.io/s/viselectvanilla-kt332

Your environment:

Toolset: vite@2.5.0
Version: @viselect/vanilla@3.0.0-beta.9
Browser:  Firefox 91
OS:  MacOS 11.5

[simonwep]

Could you elaborate the steps? stored contains the stored elements from the previous selection... I just noticed that these things are undocumented, I'll do that.

[lubomirblazekcz]

I'm trying to access all stored elements from the 'stop' event, but I always get incorrect values, I resolved this by accessing the elements with document.querySelectorAll('.selected') on 'move' event, But I'm not sure if there is other, better way to do this.

[simonwep]

I still don't really see the problem you're having :/ The sandbox example you've send it works as expected. Every time you add something to the selection the previously selected elements are logged... I slightly modified your sandbox to what you've described.

[lubomirblazekcz]

Hmm, maybe I misunderstood the event, I though store would return current selected elemens, not previous. Anyway as I said, I tried to get the current selected elements. I resolved this by accessing the elements directly via dom.

[simonwep]

The currently selected elements can be accessed with store.selected... is this what you're looking for? 🤔

[lubomirblazekcz]

That might be what I was looking for. But I see some inconsistent beheviour across event listeners. :/

When I select items with drag, it returns correct selected elements in 'move' event. But once I select one by one with cmd + click, it doesn't work.

https://codesandbox.io/s/viselect-vanilla-forked-gu7q6?file=/src/main.ts

[libasoles]

Hi. Same here. It was a bit difficult to understand that store.stored was retrieving the last time selection because a console.log will display the updated version of store.stored in the browser, while at runtime store.stored will retrieve the last results (so my script will actually fail).

Regarding store. selected , it would be nice if it could retrieve all the selected items, no matter if they were selected previously or just now. I mean, if I select two items the store.selected retrieves two, but then if I use cmd and select another two, I'd expect four now, but it only retrieves the latest two.

Anyway, I found myself performing a cumbersome math to get the selected items:

const previousSelection = this.model.userSelection(this.me());
    const added = store.changed.added.map((added) => added.dataset.slot);
    const selected = store.selected.map((selected) => selected.dataset.slot);
    const removed = store.changed.removed.map(
      (removed) => removed.dataset.slot
    );

    const selection = previousSelection
      .concat(selected)
      .concat(added)
      .filter((slot) => !removed.includes(slot));

Feels bad.

Nice to know there's this selector: document.querySelectorAll('.selected')

However, I'd still expect the library to provide this already calculated 🤷

[simonwep]

@libasoles Aren't you looking for the .getSelection() function? It returns all, currently selected elements...

[simonwep]

@lubomirblazekcz I took another look at your problem and there's a difference for what counts as a selection and the whole selection altogether.

Each drag-, click- and range-selection is a single selection and elements for this are available in store.selection.
The whole user-experience / viselect-instance consists out of multiple such "selections" which are combined in the store.stored array - if you want to get both (e.g. the elements from the current and previous selections) you'd have to use .getSelection() as asked by @libasoles!