CSS trick: Sencha Touch list tap highlight with immediate deselect

Just a quick trick this time. Sencha Touch Lists can be used for a lot of use cases. In some of those use cases we want to allow a user to tap a record and register that tap, but then immediately deselect the item (and show an action sheet for instance). With a ‘select’ listener this is no problem… but the user loses visual feedback of the tap. The solutions out there were not sufficient for us so I created a simple CSS trick for doing just that.

setTimeout… bah

The easy way would be to create a listener on the tap event and then schedule a deselect on the list with a setTimeout. These two solutions I see around as the suggested solutions the most:

1. // Clear all selections on the list after 500 ms

2. listeners: {

3. itemtap: function(list, idx, item, e) {

4. // Clear the selection after 500ms

5. setTimeout(function() {

6. list.deselectAll();

7. }, 500);

8. }

9. }

This solution can lead to race conditions because when the user quickly taps on 2 records after each other, the deselectAll of the first selected record can then deselect the second one too. When the user clicks the two items within 400ms, the first record is deselected on selection of the first, but the second one is deselected after 100ms by the timeOut scheduled by the first selection. We could of course do a clearTimeout first but then we also need to keep track of the timer id… just a hassle.

Another one:

1. // Clear the selected index on the list after 500ms

2. listeners: {

3. itemtap: function(list, idx, item, e) {

4. // Clear the selection after 500ms

5. setTimeout(function() {

6. list.deselect(idx);

7. }, 500);

8. }

9. }

This one is a little better since only the selected index is deselected. When the user quickly taps a record twice the same problem occurs as with the previous example, the second selection is cleared after 100ms by the first selection’s timeOut. Again we can store the timer id and clear it first, but I am not that much a fan of too much timeOuts floating around when they are not needed.

A better solution: CSS transition

When we select the list item, it is decorated with a new CSS class that takes care of the styling. We want to allow all the normal tap/select events to fire (so the disableSelection configuration will not work) and then immediately deselect the item. Deselecting the item is trivial:

1. listeners: {

2. itemtap: function(list, idx, item, e) {

3. // Clear the selection immediately

4. list.deselect(idx);

5. }

6. }

Great, that deselects our item, but what about the tap highlight feedback we wanted. The item is decorated with the ‘selected’ class to highlight it, but that class is then immediately removed again. Well, herein lies the solution: CSS transition delay. When we tell CSS to use a transition for certain properties of the ‘selected’ class and implement a transition delay we get exactly what we want, just add this Sass snippet to your sass files and compile the CSS:

1. .x-list-item {

2. background-color: white;

3.  

4. -webkit-transition: background-color, color 150ms linear;

5. -webkit-transition-delay: 250ms;

6.  

7. &.x-item-pressed, &.x-item-selected {

8. color: #fff;

9. background-color: $list-active-color;

10. -webkit-transition: background-color, color 0ms linear;

11. -webkit-transition-delay: 0s;

12. }

13. }

How this works is that we define a CSS transition (I have omited the custom -moz- like alternatives) on the background color and color of the .x-list-item class. The transition fades the background color and text color to their new values in 150ms (making it more fluid than just flipping it). It also incorporates a transition delay of 250ms. So when the background-color and color of the .x-list-item become active they only change after 250ms and transition for 150ms. Now when the user selects an item, the item is decorated with the .x-item-selected class. That class also contains a transition on the background-color and color, but both the transition and delay are set to 0ms. This makes sure that the item is instantaneously selected, and not with a delay and/or fade.
So in short what happens is:

• user selects item

• item is decorated with .x-item-selected
  `-> item class instantaneously ‘transitions’ the ‘selected’ styling

• the item is deselected by the handler
  `-> the default styling of the x-list-item is delayed by 250ms and then transitions to the default styling in 150ms

So there you go, instantaneous deselection of list items while still providing visual feedback to the user, emulating a delayed deselect. All without using JavaScript Timers, just pure CSS.

Consider sharing this if it helps you.