Skip to content

v4 list-group not work correctly with tabs #20620

Closed
Closed
v4 list-group not work correctly with tabs#20620
Labels
jsJavaScript or TypeScript sources and pluginsv4v4, the frozen docs on gh-pages
Milestone
v4.0.0-beta

Description

@agavazov
agavazov
opened on Sep 3, 2016

On V3 when I make tabs with list-group it works fine, but in V4 tabs are open once and active class does not disappear.

This example is with V3, you can see whats happen when test it with V4

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>

<ul class="list-group">
    <li class="list-group-item active"><a href="#panel1" data-toggle="tab">Open panel 1</a></li>
    <li class="list-group-item"><a href="#panel2" data-toggle="tab">Open panel 2</a></li>
</ul>

<hr/>

<div class="tab-content">
    <div class="tab-pane active" id="panel1">
        <div class="panel-body">Panel 1 body</div>
    </div>
    <div class="tab-pane" id="panel2">
        <div class="panel-body">Panel 2 body</div>
    </div>
</div>

</body>
</html>

Activity

  1. agavazov commented on Sep 3, 2016

    @agavazov
    agavazov
    on Sep 3, 2016
    Author

    You can see the same problem with this example http://www.codeply.com/go/rv3Cvr0lZ4

  2. mdo
    added
    jsJavaScript or TypeScript sources and plugins
    v4v4, the frozen docs on gh-pages
    on Oct 27, 2016

  3. mdo commented on Oct 27, 2016

    @mdo
    mdo
    on Oct 27, 2016
    Member

    Yeah, right now our tab JS only works with navigation components I think, not the list group. Unsure how complicated it'd be to add support for that, but maybe our newest JS friends @Johann-S and @bardiharborow could give us an idea of if it's doable?

  4. Johann-S commented on Oct 28, 2016

    @Johann-S
    Johann-S
    on Oct 28, 2016
    Member

    It's because of this line : https://github.com/twbs/bootstrap/blob/v4-dev/js/src/tab.js#L50

    IMO If we change this selector to accept .list-group-item it will work fine

    You can make it works like this, add .nav-item to li :

      <ul class="list-group">
    <li class="list-group-item nav-item">
      <a class="nav-link active" data-toggle="tab" href="#homeJo" role="tab">Home</a>
    </li>
    <li class="list-group-item nav-item">
      <a class="nav-link" data-toggle="tab" href="#profileJo" role="tab">Profile</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="homeJo" role="tabpanel">Home</div>
    <div class="tab-pane" id="profileJo" role="tabpanel">Profile</div>
  </div>

    Is it ok for you @mdo my solution ?

  5. mdo commented on Oct 28, 2016

    @mdo
    mdo
    on Oct 28, 2016
    Member

    You can make it works like this, add .nav-item to li

    Hmmm, maybe. We could also update that line of JS to accept multiple selectors, right? I could go either way tbh. If we do the multiple selectors for our JS elsewhere, then I'd say let's do that. But if we encourage mixing/matching of classes across different components, than let's do that.

    Thoughts?

  6. Johann-S commented on Oct 30, 2016

    @Johann-S
    Johann-S
    on Oct 30, 2016
    Member

    It's a tough choice, FYI I didn't find any multiple selectors in our JS currently and tbh it's difficult to know which solution is the better one 😞

  7. mdo
    added this to the v4.0.0-alpha.6 milestone on Nov 28, 2016

  8. giulianovelli commented on Dec 9, 2016

    @giulianovelli
    giulianovelli
    on Dec 9, 2016

    Maybe having specific selectors for behavior as opposed to styles could be a more generic and elegant solution? This way they could be applied to any element and it wouldn't seem weird. Someone differentiate these selectors adding a prefix like js- to the name.

  9. mdo
    modified the milestones: v4.0.0-beta, v4.0.0-alpha.6 on Dec 27, 2016

  10. Johann-S commented on Dec 30, 2016

    @Johann-S
    Johann-S
    on Dec 30, 2016
    Member

    Finally I think we should be more flexible with our components because personnaly I prefer a flexible framework than a rigid framework.
    So we should allow Tab JS to work with all lists provide by Bootstrap

  11. mdo commented on Dec 31, 2016

    @mdo
    mdo
    on Dec 31, 2016
    Member

    I agree with that @Johann-S! Any ideas?

  12. Johann-S commented on Dec 31, 2016

    @Johann-S
    Johann-S
    on Dec 31, 2016
    Member

    It's wrong what I said previously we already have multi selectors in our JS in Tab JS. So we have to expand this selector to accept all lists provided by Bootstrap.

  13. mdo commented on Mar 18, 2017

    @mdo
    mdo
    on Mar 18, 2017
    Member

    Fixed by #21756.

  14. mdo
    closed this as completedon Mar 18, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    jsJavaScript or TypeScript sources and pluginsv4v4, the frozen docs on gh-pages

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions