fix: Handle element in sortable item should be the most recent

[nicolechung]

Related issue: #492

What changed

• added a demo to the demos page
• this demo has a conditionally rendered sort handle

  {{#if this.isEven}}
    <Cells::Sortable @index={{@index}} />
  {{else}}
    <Cells::Sortable @index={{@index}} class="odd-class"/>
  {{/if}}

• because of this, the {{sort-handle}} is rendered more often than the {{sortable-item}}. Because of this, the this.handleElement in {{sort-item}} is one that is no longer in the document body.
• adding in a way to get the new this.handleElement in the keyDown handler fixes this issue
• updated tests

How to test

(refer to the animation in the issue)

1. start the demo with ember serve
2. Using your mouse (it's faster) click on the demo I created
3. Use TAB to select a fruit
4. Use ENTER to go into drag mode
5. Use ARROW KEYS to move
6. Use ENTER/SPACE to commit
7. Repeat steps 1-6 more than 3 times. It should work every time.

ember test should also pass.

[nicolechung]

Note: I couldn't seem to run yarn ember try:one ember-lts-3.24 locally:

yarn ember try:one ember-lts-3.24
yarn run v1.22.18
$ /Users/nchung/OpenSource/ember-sortable/node_modules/.bin/ember try:one ember-lts-3.24
Error!
Error: Cannot copy '../../../browserslist/cli.js' to a subdirectory of itself, '../../../browserslist/cli.js'.
Error: Cannot copy '../../../browserslist/cli.js' to a subdirectory of itself, '../../../browserslist/cli.js'.
    at /Users/nchung/OpenSource/ember-sortable/node_modules/ember-try/node_modules/fs-extra/lib/copy/copy.js:210:21
    at FSReqCallback.oncomplete (fs.js:180:23)
error Command failed with exit code 1.

So I fixed the error based on reading the error message.

[NullVoxPopuli]

Nice!

[nicolechung]

This is the main change. If you run the demo and comment out this line, you will see the error I reported in the issue.

[NullVoxPopuli]

Released in 4.0.2