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

bug or feature, the tabs panel have focus ? #1733

Closed
Diaskhan opened this Issue Apr 14, 2018 · 14 comments

Comments

Projects
None yet
3 participants
@Diaskhan

Diaskhan commented Apr 14, 2018

I'am using last version !

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

And see this screenshot
image

There a focus on tab, it is a bug, or feature! In standart tabs of boostrap4 no focus!
If this a feature how could disable, to make it not focusable.
For Design perspective is not good looking !
I'm using last chrome !

@Diaskhan

This comment has been minimized.

Diaskhan commented Apr 14, 2018

I see this issue is duplicate
#1044

https://stackoverflow.com/questions/9152096/how-to-make-an-html-element-non-focusable
Could tabindex be optional when creating component ??

@emanuelmutschlechner

This comment has been minimized.

Contributor

emanuelmutschlechner commented Apr 15, 2018

@Diaskhan
The :focus style is defined in standard Bootstrap styles. Use this piece of CSS to suppress styling:

.tabs ul.nav-tabs:focus {
    outline: none;
}

If you want to disable the focus feature completely use this directive to override tabindex of the tab component:

<b-tabs v-no-tab-focus>
    <b-tab title="first">
        <br>I'm the first fading tab
    </b-tab>
    <b-tab title="second" active>
        <br>I'm the second tab content
    </b-tab>
    <b-tab title="disabled" disabled>
        <br>Disabled tab!
    </b-tab>
</b-tabs>
Vue.directive('no-tab-focus', function(el) {
    const ul = el.querySelector('ul.nav[tabindex="0"]');
    if (typeof ul !== 'undefined') {
        ul.tabIndex = -1;
    }
});
@Diaskhan

This comment has been minimized.

Diaskhan commented Apr 15, 2018

In standart tabs of boostrap 4 no focusable elements on ul tag! There only on li element!
https://getbootstrap.com/docs/4.0/components/navs/

The focusable is feature of boostrap vue !
Thats why i'am telling its not standart functional of boostrap4.

I guesse it's must be optional !
Boostrap4 it only css layout! Boostarp vue is very very big framework ,it is not a simple css layout!

@Diaskhan

This comment has been minimized.

Diaskhan commented Apr 15, 2018

Emanuel what u offer, i some kind of hack, monkey patching is not good way for frameworks ! We talking about 1 hack, what if gonna be 5-15 monkey patching! The framework must be fully functional and solid ! Ruby and rails have the way of monkey patching, when standarts is few, there gonna be problems to support that techology!

@Diaskhan

This comment has been minimized.

Diaskhan commented Apr 15, 2018

Look at #394
Tmorehouse created a standart for table vue fetching data by ajax!

@Diaskhan Diaskhan closed this Apr 15, 2018

@Diaskhan Diaskhan reopened this Apr 15, 2018

emanuelmutschlechner added a commit to emanuelmutschlechner/bootstrap-vue that referenced this issue Apr 15, 2018

@emanuelmutschlechner

This comment has been minimized.

Contributor

emanuelmutschlechner commented Apr 15, 2018

I created a pull request to restore the original Bootstrap behavior

emanuelmutschlechner added a commit to emanuelmutschlechner/bootstrap-vue that referenced this issue Apr 15, 2018

pi0 added a commit that referenced this issue Apr 15, 2018

emanuelmutschlechner added a commit to emanuelmutschlechner/bootstrap-vue that referenced this issue Apr 15, 2018

@Diaskhan

This comment has been minimized.

Diaskhan commented Apr 15, 2018

My regards Emanuel! I,m just aming that boostrap vue looks solid ! Maybe idealize its not sometimes right!

@Diaskhan

This comment has been minimized.

Diaskhan commented Apr 16, 2018

Emanuel how could I test new version ?
I want to close issue !

@emanuelmutschlechner

This comment has been minimized.

Contributor

emanuelmutschlechner commented Apr 16, 2018

Until it is available via unpkg or npm you can use this build:
bootstrap-vue.js
bootstrap-vue.css

In your template simply add no-key-nav to <b-tabs> e.g.

<b-tabs no-key-nav>
  <b-tab title="first" active>
    <br>I'm the first fading tab
  </b-tab>
  <b-tab title="second" >
    <br>I'm the second tab content
  </b-tab>
  <b-tab title="disabled" disabled>
    <br>Disabled tab!
  </b-tab>
</b-tabs>

Link to a CodeSandbox

@Diaskhan

This comment has been minimized.

Diaskhan commented Apr 16, 2018

Thank U. And the last questions.
1.When gonna be release ?
2.Could U add no-key-nav to documentation ?
without documentation , code becomes spaghetti!

@emanuelmutschlechner

This comment has been minimized.

Contributor

emanuelmutschlechner commented Apr 16, 2018

I think in a few weeks the pre-release will be available at unpkg

Documentation will look like this
capture
capture

@Diaskhan

This comment has been minimized.

Diaskhan commented Apr 16, 2018

Look gorgeous !

@pi0

This comment has been minimized.

Member

pi0 commented Apr 16, 2018

@emanuelmutschlechner @Diaskhan If nothing unusual happens will release next RC today.

@Diaskhan

This comment has been minimized.

Diaskhan commented Apr 16, 2018

Friends this #1691 could be closed now!

@pi0 pi0 closed this Apr 16, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment