Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
paweltatarczuk opened this issue May 22, 2020 · 5 comments · Fixed by #5429
Closed

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

paweltatarczuk opened this issue May 22, 2020 · 5 comments · Fixed by #5429

Comments

@paweltatarczuk
Copy link
Contributor

paweltatarczuk commented May 22, 2020

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
Copy link
Member

Hiws commented May 22, 2020

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
Copy link
Member

tmorehouse commented May 22, 2020

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
Copy link
Contributor Author

paweltatarczuk commented May 22, 2020

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
Copy link
Member

tmorehouse commented May 22, 2020

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
Copy link
Contributor Author

paweltatarczuk commented May 22, 2020

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:

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/

jacobmllr95 added a commit that referenced this issue Jul 15, 2020
…focus behavior configurable (closes #5425) (#5429)

* fix(b-form-tags): fix input focus upon clicking on nested element

* Update form-tags.js

* Add `ignoreInputFocusSelector` prop

* Update form-tags.js

* Add comment and more selectors to ignoreInputFocusSelector in form-tags.js

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
jacobmllr95 added a commit that referenced this issue Jul 28, 2020
* chore(deps): update all non-major dependencies (#5430)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* fix(b-form-checkbox-group): only emit `input` when value loosely changes (#5432)

* fix(b-form-checkbox-group, b-form-radio-group): only emit `input` when value loosely changes

* Update loose-equal.js

* Update form-checkbox-group.spec.js

* chore(deps): update all non-major dependencies (#5440)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency vue-router to ^3.3.0 (#5443)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies (#5445)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency rollup to ^2.11.2 (#5446)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore: Change Bootstrap v4.3.x to 4.5.x in README (#5447)

Since v2.15 Bootstrap-Vue supports Bootstrap v4.5

* chore(deps): update all non-major dependencies (#5451)

* chore(deps): update all non-major dependencies

* Use `toBeEmptyDomElement()` instead of deprecated `toBeEmpty()`

* Correct typo

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update devdependency vue-router to ^3.3.2 (#5454)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): remove unused `gh-pages` dependency (#5455)

* chore(deps): update devdependency gh-pages to v3

* Remove `gh-pages` dependency

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update all non-major dependencies (#5458)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* Update all bootstrap doc links to latest version (#5450)

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update devdependency rollup to ^2.12.1 (#5463)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies (#5466)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency @nuxtjs/sitemap to ^2.3.1 (#5468)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency lint-staged to ^10.2.9 (#5470)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(b-avatar): convert line endings to Unix (#5469)

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore: convert all line endings to unix (#5474)

* chore(deps): update all non-major dependencies (#5478)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies (#5482)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency eslint-plugin-import to ^2.21.2 (#5487)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency @testing-library/jest-dom to ^5.10.0 (#5493)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies (#5495)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* first attempt (#5462)

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update all non-major dependencies (#5499)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency eslint-plugin-prettier to ^3.1.4 (#5501)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency @nuxtjs/sitemap to ^2.3.2 (#5503)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency terser to ^4.8.0 (#5505)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies (#5508)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(docs): fix typo in sidebar README (#5494) (#5510)

* chore: update auto format config (#5526)

* chore(deps): update all non-major dependencies (#5511)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update all non-major dependencies (#5531)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* fix typo (#5534)

* remove mention of `router-tag` from button docs (#5535)

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* fix(b-table): prevent endless reevaluation when using v-model and object/array literal prop values (#5554)

* Update devDependency sass-loader to v9 (#5546)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* fix(b-img): Allow empty `alt` prop (fixes #5524) (#5545)

* Allow empty `alt`

* default to null to avoid check

* remove unused import

* add avatar support

* add test cases

* spelling

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps-dev): bump standard-version from 8.0.0 to 8.0.1 (#5576)

Bumps [standard-version](https://github.com/conventional-changelog/standard-version) from 8.0.0 to 8.0.1.
- [Release notes](https://github.com/conventional-changelog/standard-version/releases)
- [Changelog](https://github.com/conventional-changelog/standard-version/blob/master/CHANGELOG.md)
- [Commits](conventional-changelog/standard-version@v8.0.0...v8.0.1)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* feat(b-form-tags): add `ignoreInputFocusSelector` prop to make input focus behavior configurable (closes #5425) (#5429)

* fix(b-form-tags): fix input focus upon clicking on nested element

* Update form-tags.js

* Add `ignoreInputFocusSelector` prop

* Update form-tags.js

* Add comment and more selectors to ignoreInputFocusSelector in form-tags.js

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update all non-major dependencies (#5533)

* chore(deps): update all non-major dependencies

* Bump BundleWatch limits for new Bootstrap Icons

* Regenerate icon files

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(docs): add an example to `<b-input-group>`'s using icons (#5537)

* Adding an example to input-groups using icons

* Update README.md

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update devdependency @nuxtjs/google-analytics to ^2.4.0 (#5583)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* fix(b-icon): use `aria-label` attribute instead of `alt` (#5581)

* fix(b-tags): replace spacing utility with static CSS (fixes #5523) (#5544)

* remove spacing utility

* use mt-auto for better centering

* update

* add new class to avoid issues with custom rendering

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(docs): improve icons page (#5579)

* feat(docs): improve icons page

* Actually use `bootstrapIconsCount` variable

* Move icon explorer to the bottom

* chore: regenerate `yarn.lock` (#5585)

* fix(b-form-tags): unit test (#5586)

* chore(deps): update devdependency rollup to ^2.22.0 (#5589)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies (#5590)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* feat(docs): launch themes page with first BootstrapVue theme (#5549)

* docs(footer): uncomment link for themes

* docs(header): uncomment link for themes

* docs(sidebar): uncomment link for themes

* docs(intro/README): uncomment link for themes

* docs(theming/README): uncomment link for themes

* feature(themes): add first Bootstrap Vue & Creative Tim theme

* style(themes): prettify themes files

* fix(themes): solve typo

* Use `@nuxt/content` for themes

* Update index.vue

* Update themes.vue

* Don't pin `@nuxt/content`

* Update themes.vue

* Update themes.vue

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* fix: properly handle special characters in user-provided IDs (closes #4927, #5561) (#5564)

* fix(b-form-group): make it work for ids with special characters like "/"

Special characters are allowed in HTML5 (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) but need to be escaped when used in a selector for usage in e.g. "querySelector"

Refs #5561

* Use own `cssEscape()` util + use/test everywhere needed

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(ci): update `actions/cache` to v2 (#5580)

* chore(ci): update `actions/cache` to v2

* Update test.yml

* Update test.yml

* fix(b-form-tags): unit tests

* Revert "fix(b-form-tags): unit tests"

This reverts commit 20ebc04.

* Split actions

* Run BundleWatch during build

* Update build.yml

* Revert "Update build.yml"

This reverts commit ed4ad3d.

* Update build.yml

* chore: replace `packagequality` badge with `codacy` in README (#5596)

* chore: replace `packagequality` badge with `codacy` in README

* Update README.md

* chore(deps): update devdependency rollup to ^2.22.2 (#5597)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency rollup to ^2.23.0 (#5603)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* remove redundant height declaration in .b-sidebar (#5606)

* chore(deps): update devdependency eslint-plugin-jest to ^23.18.2 (#5607)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update all non-major dependencies (#5609)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(docs): fix Bootstrap browser and devices link

* chore(ci): fix BundleWatch token name

* chore: add back `packagequality` badge to README

* chore: prettify

* chore: update contributors

* chore(deps): update devdependency eslint-plugin-jest to ^23.19.0 (#5611)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore: add script to generate release notes (#5612)

* chore: bump version to 2.16.0 and update changelog (#5614)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Troy Morehouse <troymore@nbnet.nb.ca>
Co-authored-by: TitanFighter <bear_ukraine@bigmir.net>
Co-authored-by: Hiws <rni@nova-c.dk>
Co-authored-by: Vitaly Slobodin <vitaly_slobodin@fastmail.com>
Co-authored-by: Sergey Skrynnikov <minotaar.hh@gmail.com>
Co-authored-by: James George <jamesgeorge998001@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Paweł Tatarczuk <paweltatarczuk@gmail.com>
Co-authored-by: Ivan Gonzalez <scratchmex@gmail.com>
Co-authored-by: Hiws <hiws@live.dk>
Co-authored-by: Nazare Emanuel-Ioan <emanuelioannazare@gmail.com>
Co-authored-by: Dieter Geerts <dieter@dworks.be>
Co-authored-by: michel milano <mmilano@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants