Issue

https://otwarchive.atlassian.net/browse/AO3-4004

Purpose

When an autocomplete field has a limit to how many items you can enter in it (e.g. the Synonym field on tag Edit pages limits you to entering 1 synonym), keyboard focus would behave oddly after you reached that limit. In some browsers, it would stay on the now-hidden input, so you couldn't see where it was, which was mildly annoying. In other browsers, it would just freak out and go away, and you'd start back at the top of the page -- super annoying if you're halfway through filling out a form.

So! Now we put the focus on the little × that lets you remove the last item you entered. You can then either hit enter to remove the item and type a new one, or hit tab to move to the next item in the form.

References

Believe it or not, this is related to tests! james_ was trying to improve test coverage for the external_works controller, so he removed something that was broken, and I said, "hey, let's fix it instead -- it's easy!" Which was a foolish thing to say and I should know better. When I fixed that bug and tried to write a test using our exciting new ability to test things with JavaScript, this bug got in my way. So here we are.

And it helps to know that this is the HTML you get when you have an autocomplete and two tokens:

<ul class="autocomplete">
  <li class="added tag">Brenda Leigh Johnson <span class="delete"><a href="#" title="remove Brenda Leigh Johnson">×</a></span></li>
  <li class="added tag"> Sharon Raydor <span class="delete"><a href="#" title="remove  Sharon Raydor">×</a></span></li>
  <li class="input">
    <input type="text" class="text" autocomplete="off" role="combobox" aria-expanded="true" aria-autocomplete="list" id="work_character_autocomplete">
    <div class="autocomplete dropdown" style="display: none;"></div>
  </li>
</ul>
<input autocomplete_hint_text="Start typing for suggestions!" autocomplete_live_params="fandom=work_fandom" autocomplete_method="/autocomplete/character_in_fandom" autocomplete_min_chars="1" autocomplete_no_results_text="(No suggestions found)" autocomplete_searching_text="Searching..." class="autocomplete" id="work_character" name="work[character_string]" title="characters" type="text" value="Brenda Leigh Johnson, Sharon Raydor" style="display: none;">

I worry a bit about adding custom code to a plugin that isn't by us. But the code itself is good. And the jQuery selectors for the external work bookmarking form all worked when I tried them out.

Since this is a useful fix, you could submit it as a pull request on the plugin's github?

I'm not overly fond of the approach either, but it's unfortunately very heavily customized at this point -- I once thought it would be nice to update it, but we've already rewritten so much of it, it was pretty much impossible. So this is unfortunately in line with what we've been doing, and also not applicable to the original plugin's code.

Also, ugh, those other files were not supposed to be in here. Let me get them out...

Oh, I wasn't aware that it was already customized. Since you say the reason why I didn't like it has already occurred, I have no issue with further customization. :D

Yay, thanks! Can you switch the label to ready to merge?