Multi Select - Shift Select

[jshcrowthe]

This is more of an a11y feature addition thing than anything else.

In multi-select mode (whether this is enabled by default or not I'm not sure), it'd be nice to have a shift-click that multi selects similar to the filesystem's standard behavior. Although this is fairly simple to implement in a wrapper layer, baking this kind of thing into iron-list would be nice.

Thoughts?

[MeTaNoV]

This issue https://github.com/PolymerElements/iron-selector/issues/38 is covering the topic already.

[jshcrowthe]

@MeTaNoV That's awesome! However the fix for iron-selector will not translate into a fix for iron-list. iron-list uses array-selector for it's select mechanism underneath the covers.

[MeTaNoV]

oh sorry! I thought iron-list was using iron-selector in its implementation...

[blasten]

yeah that sounds like a good thing to have. is anyone willing to send a PR for this feature?

[jshcrowthe]

I'd be happy to!

[czellweg]

Has there been any progress on this issue?

[blasten]

I haven't had time to look into this feature, but it's also pretty easy to add a click event listener that if event.shiftKey === true then it does range selection from the current selected item to the clicked item.

[jshcrowthe]

@czellweg I dropped the ball on this one. I've been heads down working on other stuff for a while though I've wanted to do this.

[czellweg]

@jshcrowthe Thank you for the feedback Josh, was just interested to see if anybody has taken this on. Will check out @blasten's input.

[jshcrowthe]

I decided to sit down and prototype this (thank heavens for airplanes). It wasn't horrible to get working though not as easy as I had hoped.

There is a lot of interesting nuance associated with doing shift select. I haven't gotten in to doing shiftSelect with KeyboardEvents yet but doing it with MouseEvent has gotten me asking a bunch of questions as to how we should approach this.

I have put together a strawman approach on my fork which is available here: https://github.com/jshcrowthe/iron-list/tree/shift-select

@czellweg, @blasten would love your feedback.

[czellweg]

@jshcrowthe Maybe there is a chance to work with @Caffeinix as described in this post: https://github.com/PolymerElements/iron-selector/issues/123

Other than that, I'm testing your implementation as I'm writing this and it seems to work pretty well.

[czellweg]

@jshcrowthe I've forked and adjusted your solution slightly, see here https://github.com/czellweg/iron-list/tree/shift-select

To check it out:

• git clone https://github.com/czellweg/iron-list.git
• git checkout shift-select and bower install
• polymer serve -p 8086
• browse to http://localhost:8086/components/iron-list/selection.html

[blasten]

@jshcrowthe That looks pretty good. One thing I'd suggest though is moving that code to a demo instead of adding to the element itself if you would like to send a PR :) Wdyt?

[jshcrowthe]

@blasten interesting thought!

I was kind of wrestling with the idea of how I should add this kind of functionality as many people may have already implemented something like this themselves (it's not incredibly difficult, though there are some interesting edge cases).

The thought was, because I am working with private API of the element, (e.g. this._getNormalizedItem(item), this._physicalItems.map(...), etc) that the functionality would be local to the element itself. However I was thinking that I should probably gate it behind a property to make it opt-in.

Thoughts?

[jshcrowthe]

@czellweg I've taken a look at the iron-selector proposal you linked and I like his behavior breakdown. I was speaking to a co-worker about this and apparently there is a resource someplace that documents how different "OS-like" functionalities are designed. I will try and get access to that and contribute to that conversation.

As for the adjustments you made, I like the feel, and it simplifies the computation which is great for runtime perf.

👍 to that. I think before we do anything concrete, a "spec" (or something of the like) on how shift selecting should be implemented would be smart as we want this functionality to be something that maps to a concept users already understand.

[czellweg]

@jshcrowthe One thing I haven't yet implemented is the shift-unselect. I think that could be added in a very similar fashion like the shift-select part. If I get around to it, I will implement it and let you know once that is done.

@blasten Agreed. The demo should be done according to the best-practices. Will change that when I get a chance.