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

uiv conflict with bootstrap.mini.js #836

Closed
zcattacz opened this issue Aug 8, 2023 · 4 comments
Closed

uiv conflict with bootstrap.mini.js #836

zcattacz opened this issue Aug 8, 2023 · 4 comments
Assignees
@wxsms
Labels
bug wontfix

Comments

@zcattacz
Copy link

zcattacz commented Aug 8, 2023

Describe the bug

when bootstrap.js appears on the same page with uiv, button groups with data-toggle attributes stops working.

To Reproduce
Steps to reproduce the behavior:

<!DOCTYPE html>
<html>
  <body >
  <div id="app"><btn_grp_test>/<btn_grp_test></div>
<script type="text/x-template" id="btn_grp_test">
    <section class="uiv">
      <btn-group>
        <btn v-model="model" input-type="checkbox" input-value="1">Checkbox 1</btn>
        <btn v-model="model" input-type="checkbox" input-value="2">Checkbox 2</btn>
        <btn v-model="model" input-type="checkbox" input-value="3">Checkbox 3</btn>
        <btn v-model="model" input-type="checkbox" input-value="4" disabled>Checkbox 4 (Disabled)</btn>
      </btn-group>
      <hr />
      <alert>Selected: {{ model }}</alert>
    </section>
  </script>
  <script type="text/javascript" src="/static/vuejs/vue-2.7.13.js"></script>
  <script type="text/javascript" src="/static/uiv/1.4.3/uiv.min.js"></script>
  <script type="text/javascript">
    Vue.component("btn_grp_test", {
        template: "#btn_grp_test",
        data() {return {"model": ['1']};},
        mounted() {
          // without this, group button's model data will stop updating.
          // but with this fix, the styling is partially gone and looks broken.
          this.$el.getElementsByClassName("btn-group")[0].removeAttribute("data-toggle");
        }
    });
    var vm = new Vue().$mount('#app');
  </script>
<script src="/static/appbuilder/js/jquery-latest.js" nonce=""></script>
<script src="/static/appbuilder/js/bootstrap.min.js" nonce=""></script>
</body>
</html>

Expected behavior
Hope there is an official workaround, since bootstrap.js is part of bootstrap and it does have some market. Like in my case, I don't use it, but the framework I used (Flask App Builder) relies on bootstrap.js for menus etc. FAB user's templates are wrapped in the main template, which always source bootstrap.js.
Really, don't want to modify resources in that python package to avoid patching after every update.

Additional context
Not tried, since am not familiar with vue3, but this might also affect uiv2.
@zcattacz zcattacz added the bug label Aug 8, 2023
@wxsms wxsms added the wontfix label Aug 8, 2023
@wxsms
Copy link
Member

wxsms commented Aug 8, 2023 •
edited
Loading

It's meant to be a replacement of bootstrap.js, it makes no sense in most cases to include them together. Therefore no solution can be provided here.

uiv and bootstrap.js sharing same css file, some attribute (e.g. data-toggle) must be added, otherwise the style will be broken. bootstrap.js is listening on all elements on the page regardless it's driven by Vue or not, while uiv only affect things inside Vue context. Technically, the problem is on bootstrap side.

@zcattacz
Copy link
Author

zcattacz commented Aug 8, 2023 •
edited
Loading

That's fine, at least please mention this in the doc,
so that users bumping into such issues won't spend hours debugging these known issues.

Currently <div data-toggle > seems the only one with such noticeable issue, at least dropdown, button and datapicker doesn't not seem to be affected.

wxsms added a commit that referenced this issue Aug 9, 2023
@wxsms
docs: add tip about bootstrap.js #836
6f963bf
wxsms added a commit that referenced this issue Aug 9, 2023
@wxsms
docs(v1): add tip about bootstrap.js #836
f6f0dff
@wxsms
Copy link
Member

wxsms commented Aug 9, 2023

tip added to both v1 and v2 doc.

@zcattacz
Copy link
Author

zcattacz commented Aug 9, 2023

Thanks, that's a tip worth hours. :-)

@zcattacz zcattacz closed this as completed Aug 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@wxsms wxsms

Labels
bug wontfix
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@zcattacz @wxsms