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.

Sign up for GitHub

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

Jump to bottom

<b-table> has an unexpected "tabindex" attribute containing "false" #8

Closed
kikuomax opened this issue Jul 21, 2023 · 1 comment
Closed

<b-table> has an unexpected "tabindex" attribute containing "false" #8

kikuomax opened this issue Jul 21, 2023 · 1 comment
Labels
bug Something isn't working

Comments

@kikuomax
Copy link
Collaborator

Overview of the problem

Buefy version: buefy-next (67ecf3a)
Vuejs version: 3.3.4
OS/Browser: macOS/@vue/test-utils, Safari

Description

<b-table> ended up with a <table> element with tabindex attribute containing false if the focusable prop was false or not specified.

Steps to reproduce

<b-table></b-table>

I encountered this while working on unit tests of Table:

Expected behavior

<table class="table">
  ...
</table>

Actual behavior

<table class="table" tabindex="false">
  ...
</table>
@kikuomax kikuomax added the bug Something isn't working label Jul 21, 2023
kikuomax added a commit to kikuomax/buefy that referenced this issue Jul 21, 2023
@kikuomax
fix(lib): remove unexpected tabindex
234f8c6 
- Fixes the bug that `Table` ended up with `<table>` with an unexpected
  "tabindex" attribute. This bug was caused because Vue 3 no longer
  removes a boolean attribute if its value is "false". `Table` binds
  `undefined` instead of `false` to "tabindex" if `focusable` is `false`
  or not specified.

issue ntohq#8
@kikuomax kikuomax mentioned this issue Jul 21, 2023
Merged
kikuomax added a commit that referenced this issue Jul 21, 2023
@kikuomax
test(lib): update Table spec
d6ec689 
- Updates the unit tests (spec) of `Table` so that they work with Vue 3
  and `@vue/test-utils` V2:
    - Removes `setVueInstance` because it does nothing on `buefy-next`.
    - Replaces `sinon`'s `useFakeTimers` with a combination of
      `jest.useFakeTimers` and `jest.advanceTimersByTime` so that we
      will be able to remove `sinon` from dependencies in the future.
      Awaits `$nextTick` after `jest.advanceTimersByTime` to make sure
      DOM is updated, otherwise the test fails.
    - Replaces `wrapper.find` with `wrapper.findComponent` to locate a
      component, because `wrapper.find` is dedicated to finding a DOM
      element on `@vue/test-utils` V2.
    - Replaces `isEmpty` of `Wrapper` with a combination of `element`
      and `toBeEmptyDOMElement`, because `Wrapper` no longer provides
      `isEmpty` on `@vue/test-utils` V2.
    - Replaces `contains` of `Wrapper` with a combination of `find` and
      `exists`, because `Wrapper` no longer provides `contains` on
      `@vue/test-utils` V2.
    - Replaces `wrapper.name()` with `wrapper.vm.$options.name`, because
      `wrapper.name` no longer exists in `@vue/test-utils` V2.
    - Replaces the test on `wrapper.isVueInstance()` with presence of
      `wrapper.vm`, because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.
    - Awaits `wrapper.setProps` to make sure the subsequent tests verify
      the updated state.
    - Replaces `propsData` with `props`, because `propsData` might be
      deprecated in the future.
    - Refreshes the snapshot. I temporarily fixed the bug I found while
      updating the spec (#8) to make the snapshot.
    - NOTE: the tests won't pass until the bug is fixed:
        - #8

issue #1
wesdevpro pushed a commit that referenced this issue Jul 24, 2023
@kikuomax
fix(lib): remove unexpected tabindex (#9)
81ca7cc 
- Fixes the bug that `Table` ended up with `<table>` with an unexpected
  "tabindex" attribute. This bug was caused because Vue 3 no longer
  removes a boolean attribute if its value is "false". `Table` binds
  `undefined` instead of `false` to "tabindex" if `focusable` is `false`
  or not specified.

issue #8
wesdevpro added a commit that referenced this issue Jul 25, 2023
@wesdevpro @kikuomax
Update main from dev And Publish @ntohq/buefy-next to NPM (#12)
a3c3ec5 
* fix(lib): b-field-body wrapped text in b-field

- Fixes the bug that a horizontal `b-field-body` wrapped a simple text
  element with an extra `b-field`. It now returns a text element as is.

issue #5

* fix(lib): performance warning on FieldBody

- Removes a Vue runtime warning that indicated a potential performance
  issue related to how `FieldBody` gave the default slot to `Field`.
  Changes the third parameter of `h` function call to create a `Field`
  from a direct child `[element]` to a function slot `() => element`.

  This will address the issue pointed at in the comment:
  #1 (comment)

* fix(lib): remove unexpected tabindex (#9)

- Fixes the bug that `Table` ended up with `<table>` with an unexpected
  "tabindex" attribute. This bug was caused because Vue 3 no longer
  removes a boolean attribute if its value is "false". `Table` binds
  `undefined` instead of `false` to "tabindex" if `focusable` is `false`
  or not specified.

issue #8

* Publish Package @ntohq/buefy-next (#10)

* Removed CircleCi

* Created GitHub Action Workflow Files

* Added Workflow and Updated Package.json

* Update package.json (#11)

* Update Package Name to `@ntohq/buefy-next` For Publishing to NPM (#13)

* Update package.json

* Rename Package For Publishing to NPM

* Rename Package For Publishing to NPM

* Cleaned Up Workflow and Package.json

* Update package.json

---------

Co-authored-by: Kikuo Emoto <kemoto@codemonger.io>
wesdevpro added a commit that referenced this issue Jul 25, 2023
@wesdevpro @kikuomax
Rename Workflow Folder to Workflows (#14)
3f4bc81 
* fix(lib): b-field-body wrapped text in b-field

- Fixes the bug that a horizontal `b-field-body` wrapped a simple text
  element with an extra `b-field`. It now returns a text element as is.

issue #5

* fix(lib): performance warning on FieldBody

- Removes a Vue runtime warning that indicated a potential performance
  issue related to how `FieldBody` gave the default slot to `Field`.
  Changes the third parameter of `h` function call to create a `Field`
  from a direct child `[element]` to a function slot `() => element`.

  This will address the issue pointed at in the comment:
  #1 (comment)

* fix(lib): remove unexpected tabindex (#9)

- Fixes the bug that `Table` ended up with `<table>` with an unexpected
  "tabindex" attribute. This bug was caused because Vue 3 no longer
  removes a boolean attribute if its value is "false". `Table` binds
  `undefined` instead of `false` to "tabindex" if `focusable` is `false`
  or not specified.

issue #8

* Publish Package @ntohq/buefy-next (#10)

* Removed CircleCi

* Created GitHub Action Workflow Files

* Added Workflow and Updated Package.json

* Update package.json (#11)

* Update Package Name to `@ntohq/buefy-next` For Publishing to NPM (#13)

* Update package.json

* Rename Package For Publishing to NPM

* Rename Package For Publishing to NPM

* Cleaned Up Workflow and Package.json

* Update package.json

* Renamed Workflow Folder

---------

Co-authored-by: Kikuo Emoto <kemoto@codemonger.io>
wesdevpro added a commit that referenced this issue Jul 25, 2023
@wesdevpro @kikuomax
Add NPM Public Access Flag to Publish Workflow (#15)
f0348bf 
* fix(lib): b-field-body wrapped text in b-field

- Fixes the bug that a horizontal `b-field-body` wrapped a simple text
  element with an extra `b-field`. It now returns a text element as is.

issue #5

* fix(lib): performance warning on FieldBody

- Removes a Vue runtime warning that indicated a potential performance
  issue related to how `FieldBody` gave the default slot to `Field`.
  Changes the third parameter of `h` function call to create a `Field`
  from a direct child `[element]` to a function slot `() => element`.

  This will address the issue pointed at in the comment:
  #1 (comment)

* fix(lib): remove unexpected tabindex (#9)

- Fixes the bug that `Table` ended up with `<table>` with an unexpected
  "tabindex" attribute. This bug was caused because Vue 3 no longer
  removes a boolean attribute if its value is "false". `Table` binds
  `undefined` instead of `false` to "tabindex" if `focusable` is `false`
  or not specified.

issue #8

* Publish Package @ntohq/buefy-next (#10)

* Removed CircleCi

* Created GitHub Action Workflow Files

* Added Workflow and Updated Package.json

* Update package.json (#11)

* Update Package Name to `@ntohq/buefy-next` For Publishing to NPM (#13)

* Update package.json

* Rename Package For Publishing to NPM

* Rename Package For Publishing to NPM

* Cleaned Up Workflow and Package.json

* Update package.json

* Renamed Workflow Folder

* Update npm_deploy.yml

---------

Co-authored-by: Kikuo Emoto <kemoto@codemonger.io>
@kikuomax
Copy link
Collaborator Author

This was fixed in PR #12.

wesdevpro added a commit that referenced this issue Aug 9, 2023
@kikuomax @wesdevpro
Fix "TypeError: this.$slots.default is not a function" (#18, #20) (#25)
0d04c8f 
* fix(lib): b-field-body wrapped text in b-field

- Fixes the bug that a horizontal `b-field-body` wrapped a simple text
  element with an extra `b-field`. It now returns a text element as is.

issue #5

* fix(lib): performance warning on FieldBody

- Removes a Vue runtime warning that indicated a potential performance
  issue related to how `FieldBody` gave the default slot to `Field`.
  Changes the third parameter of `h` function call to create a `Field`
  from a direct child `[element]` to a function slot `() => element`.

  This will address the issue pointed at in the comment:
  #1 (comment)

* fix(lib): remove unexpected tabindex (#9)

- Fixes the bug that `Table` ended up with `<table>` with an unexpected
  "tabindex" attribute. This bug was caused because Vue 3 no longer
  removes a boolean attribute if its value is "false". `Table` binds
  `undefined` instead of `false` to "tabindex" if `focusable` is `false`
  or not specified.

issue #8

* Publish Package @ntohq/buefy-next (#10)

* Removed CircleCi

* Created GitHub Action Workflow Files

* Added Workflow and Updated Package.json

* Update package.json (#11)

* Update Package Name to `@ntohq/buefy-next` For Publishing to NPM (#13)

* Update package.json

* Rename Package For Publishing to NPM

* Rename Package For Publishing to NPM

* Cleaned Up Workflow and Package.json

* Update package.json

* Renamed Workflow Folder

* Update npm_deploy.yml

* fix(lib): empty BMenuList crash (#21)

- Fixes the bug where an empty `BMenuList` crashed with "TypeError:
  slots.default is not a function". I found `slots.default` was
  `undefined` if `BMenuList` was empty. `BMenuList` makes sure
  `slots.default` is a function before calling it, otherwise returns
  `slots.default` as is.

issue #20

* fix(lib): empty FieldBody crash (#22)

- Fixes the bug where `FieldBody` crashed if no default slot was given.
  `FieldBody` makes sure that `this.$slots.default` is a function before
  calling it and not null before accesssing its fields. This is a
  potential cause of #18, but there might be other
  reasons.

issue #18

* chore: bump version to 0.1.1

---------

Co-authored-by: Wesley Ford <wes@wesdev.pro>
kikuomax added a commit to kikuomax/buefy that referenced this issue Sep 1, 2023
@kikuomax
test(lib): update Table spec
f0db147 
- Updates the unit tests (spec) of `Table` so that they work with Vue 3
  and `@vue/test-utils` V2:
    - Removes `setVueInstance` because it does nothing on `buefy-next`.
    - Replaces `sinon`'s `useFakeTimers` with a combination of
      `jest.useFakeTimers` and `jest.advanceTimersByTime` so that we
      will be able to remove `sinon` from dependencies in the future.
      Awaits `$nextTick` after `jest.advanceTimersByTime` to make sure
      DOM is updated, otherwise the test fails.
    - Replaces `wrapper.find` with `wrapper.findComponent` to locate a
      component, because `wrapper.find` is dedicated to finding a DOM
      element on `@vue/test-utils` V2.
    - Replaces `isEmpty` of `Wrapper` with a combination of `element`
      and `toBeEmptyDOMElement`, because `Wrapper` no longer provides
      `isEmpty` on `@vue/test-utils` V2.
    - Replaces `contains` of `Wrapper` with a combination of `find` and
      `exists`, because `Wrapper` no longer provides `contains` on
      `@vue/test-utils` V2.
    - Replaces `wrapper.name()` with `wrapper.vm.$options.name`, because
      `wrapper.name` no longer exists in `@vue/test-utils` V2.
    - Replaces the test on `wrapper.isVueInstance()` with presence of
      `wrapper.vm`, because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.
    - Awaits `wrapper.setProps` to make sure the subsequent tests verify
      the updated state.
    - Replaces `propsData` with `props`, because `propsData` might be
      deprecated in the future.
    - Refreshes the snapshot. I temporarily fixed the bug I found while
      updating the spec (ntohq#8) to make the snapshot.
    - NOTE: the tests won't pass until the bug is fixed:
        - ntohq#8

issue ntohq#1
wesdevpro pushed a commit that referenced this issue Sep 2, 2023
@kikuomax
Port spec for Table (#58)
b61c9a2 
* test(lib): update Table spec

- Updates the unit tests (spec) of `Table` so that they work with Vue 3
  and `@vue/test-utils` V2:
    - Removes `setVueInstance` because it does nothing on `buefy-next`.
    - Replaces `sinon`'s `useFakeTimers` with a combination of
      `jest.useFakeTimers` and `jest.advanceTimersByTime` so that we
      will be able to remove `sinon` from dependencies in the future.
      Awaits `$nextTick` after `jest.advanceTimersByTime` to make sure
      DOM is updated, otherwise the test fails.
    - Replaces `wrapper.find` with `wrapper.findComponent` to locate a
      component, because `wrapper.find` is dedicated to finding a DOM
      element on `@vue/test-utils` V2.
    - Replaces `isEmpty` of `Wrapper` with a combination of `element`
      and `toBeEmptyDOMElement`, because `Wrapper` no longer provides
      `isEmpty` on `@vue/test-utils` V2.
    - Replaces `contains` of `Wrapper` with a combination of `find` and
      `exists`, because `Wrapper` no longer provides `contains` on
      `@vue/test-utils` V2.
    - Replaces `wrapper.name()` with `wrapper.vm.$options.name`, because
      `wrapper.name` no longer exists in `@vue/test-utils` V2.
    - Replaces the test on `wrapper.isVueInstance()` with presence of
      `wrapper.vm`, because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.
    - Awaits `wrapper.setProps` to make sure the subsequent tests verify
      the updated state.
    - Replaces `propsData` with `props`, because `propsData` might be
      deprecated in the future.
    - Refreshes the snapshot. I temporarily fixed the bug I found while
      updating the spec (#8) to make the snapshot.
    - NOTE: the tests won't pass until the bug is fixed:
        - #8

issue #1

* test(lib): update TableColumn spec

- Updates the unit tests (spec) of `TableColumn` so that they can work
  with `@vue/test-utils` V2:
    - Replaces `find` with `findComponent` because `find` is dedicated
      to DOM elements on `@vue/test-utils` V2.
    - Replaces `wrapper.name()` with `wrapper.vm.$options.name` because
      `wrapper.name` no longer exists in `@vue/test-utils` V2.
    - Replaces the test on `wrapper.isVueInstance` with presence of
      `wrapper.vm` because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.
    - Removes the `sync` option for `mount` because it no longer exists
      in `@vue/test-utils`. It neither has any effect.

issue #1

* test(lib): update TableMobileSort spec

- Updates the unit tests (spec) of `TableMobileSort` so that they can
  work with `@vue/test-utils` V2:
    - Awaits `wrapper.setProps` to make sure the subsequent tests verify
      the updated state. Also replaces an old style async test case with
      async/await syntax.
    - Replaces `wrapper.name()` with `wrapper.vm.$options.name` because
      `wrapper.name` no longer exists in `@vue/test-utils` V2.
    - Replaces the test on `wrapper.isVueInstance()` with presence of
      `wrapper.vm` because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.
    - Removes `sync` option for `shallowMount` because it no longer
      exists in `@vue/test-utils` V2 and has no effect.

  The tests won't pass until the issue mentioned in the following
  comment is fixed:
    - #1 (comment)

issue #1

* fix(lib): TableMobileSort without columns

- Fixes the issue where `TableMobileSort` crashed at initialization if
  `columns` was `null` or `undefined`. This happened in unit tests. I do
  not think users of Buefy face this issue.

issue #1 (comment)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@kikuomax