Can't click on dropdown arrow when `showAllValues: true` to open menu

[tvararu]

It's displaying a regular cursor (instead of a pointer) and the click event isn't being used to trigger the autocomplete.

Would also be good if clicking again on it closed it.

Edit (Nick): Related https://github.com/alphagov/accessible-autocomplete/issues/222

[galund]

FWIW I think that only the area of the dropdown icon should be clickable (and should therefore have the 'hand' pointer).

It would certainly put me off typing, that the mouse pointer is not a I-bar in the rest of the control.

[edwardhorsford]

@galund I agree, and have raised separate issue about cursors: #206

[tvararu]

Yep good points both 👍

[joelanman]

Disagree about just the arrow being clickable, the idea behind showAllValues was to show all values when you interact with the autocomplete. Clicking anywhere is the behaviour of a dropdown, which this aimed to replicate, and I think it's pretty clear you can type as the input gets focus, with an I bar. This is the kind of thing we should really get user research on.

[galund]

I'm fairly sure that the 'original' Windows combo box didn't show the list when you clicked in the box, only when you clicked the button, but that's past history and definitely whatever tests better now should win :)

[oskarrough]

Agree with @joelanman. Can we compare it with a normal <select>? It also has an arrow icon. If so, the whole <input> area should toggle the dropdown.

Back to the issue. How do we best fix this? I found this line https://github.com/alphagov/accessible-autocomplete/blob/master/src/autocomplete.js#L219 but not quite sure what the logic should be.

[tvararu]

@oskarrough you're looking at fixing the behaviour described in #222 where the dropdown arrow doesn't close the menu, yes?

The line you linked, which is inside handleInputChange and gets triggered by handleInputClick, wouldn't help us with this particular issue. This is because handleInputClick gets called when any part of the input is clicked, not just the dropdownArrow. This includes when users click on individual letters to reposition their caret; hiding and unhiding the menu during this would be unpleasant.

To solve this we would need to track click events on the dropdownArrow itself, which involves adding another onClick handler and dealing with the required state changes.

Keep in mind there are three types of possible arrows:

• default (an internally managed preact component)
• custom HTML string (provided as an option, which is dangerously inserted)
• custom (p)react component (provided as an option, which is rendered)

So this potentially needs something like a wrapper, maybe later when the arrow is properly rendered, to capture all three possible types. For example, <span onClick={ this.handleDropdownClick }>{dropdownArrow}</span>

The dropdown is also absolutely positioned inside the parent so there's that to keep in mind as well if it's being wrapped.

The logic itself I imagine could look like:

handleDropdownClick (event) {
  const menuOpen = { this.state }
  if (menuOpen) {
    this.setState({ menuOpen: false })
  } else {
    this.handleInputClick(event)
  }
}

Mind you I haven't tested this, but do comment here with how it goes!

[oskarrough]

Thanks @tvararu! I hope to have a look at it.

As an innocent/dirty quickfix, this works for my usecase:

.autocomplete__input--show-all-values.autocomplete__input--focused + 
.autocomplete__dropdown-arrow-down {
  z-index: 1;
}

It puts the arrow on top, which makes it clickable, but only while the menu is focused and open.

[edwardhorsford]

I'm not 100% sure I'm on the right issue here, but all three of my participants today tried to interact with our autocomplete (with arrow and showall values) by clicking the arrow - which doesn't work. It's quite a barrier.

[edwardhorsford]

Four more participants (out of four) this week attempted to interact with the dropdown by clicking the arrow. AFAIK they all were able to eventually work out where to click - but just like most users interacting with radios by clicking on them, I think most users are interacting with the 'drop-down' by clicking the arrow.

[oskarrough]

@edwardhorsford could you try the snippet from https://github.com/alphagov/accessible-autocomplete/issues/202#issuecomment-378564209 and see if it solves the issue?

[petejobesdigitaldwp]

I'm having this issue too, using the snippet from #202 (comment) makes it clickable while open, but it's still not clickable while closed.

[edwardhorsford]

We tested with four more users yesterday and again all four attempted to interact with the autocomplete by clicking the arrow.

I think we've now added a bit of js to detect clicks - and open and close, but this does not retain the correct focus state.

[edwardhorsford]

Tested with 4 more users today - all four again tried to click the arrow to open the menu.