Clicking on a b-form-tags does not always result with input getting focus

[paweltatarczuk]

Describe the bug

Clicking on the ul element inside b-form-tags does not cause input to get focus, clicking on any other element or the div.b-form-tags itself works just fine (it focuses the input).

Steps to reproduce the bug

1. Add tags unitl the input breaks to new line
2. Click the white space after the last tag
3. Input does not get focus

Expected behavior

Clicking anywhere inside the b-form-tags component should focus the input.

Versions

Libraries:

• BootstrapVue: 2.14.0
• Bootstrap: 4.4.1
• Vue: 2.6.11

Environment:

• Device: not relevant
• OS: not relevant
• Browser: not relevant
• Version: not relevant

Demo link

https://jsfiddle.net/n049f1k5/0

Additional context

There is a workaround for this: https://jsfiddle.net/n049f1k5/1

[Hiws]

There's another area in your workaround that remains clickable without adding focus to the input.

I've highlighted it with blue here:
https://jsfiddle.net/um8aky9o/

Another possibility would be to use the native focus event and always throw focus to the input.
I'm not sure if this method would have any downsides to accessibility.
https://jsfiddle.net/uvwx5rp4/

[tmorehouse]

Tags have a clickable X button for removal, so we can't always move focus to the <input> if a tag is clicked (the tag is also a label for the X button)

[paweltatarczuk]

Can we focus the input on click if the click target is not a button / tag / input? This shouldn't break anything, I guess. Or is there a better way?

[tmorehouse]

We could see if we can tweak the click handler on the outer wrapper (when clicking the outer wrapper it will focus the input)

I know if I click on a tag label (with a mouse), the input gets focused for me (Chrome on Windows).

Which browser/OS are you using?

[paweltatarczuk]

I know if I click on a tag label (with a mouse), the input gets focused for me (Chrome on Windows).

It does not work for me like that. When I click a single tag only the wrapper gets focus class but no button / input.

I'm using Firefox / Chrome on Ubuntu 20.04.

---

I believe the problem is here:

bootstrap-vue/src/components/form-tags/form-tags.js

Lines 418 to 424 in a8ab65e

	onClick(evt) {
	if (!this.disabled && isEvent(evt) && evt.target === evt.currentTarget) {
	this.$nextTick(() => {
	this.focus()
	})
	}
	},

It only works for outer element, however the same code executed on focus should work as expected:

• Clicking on element that can get focus won't steal the focus
• Clicking on element that can't get focus will pass the focus to input
• Tab works correctly

Take a look at this fiddle: https://jsfiddle.net/bp4xk9oy/