fix(b-form-spinbutton): prevent buttons from re-ordering when parent element is RTL (bootstrap-vue#4802)

tmorehouse · web-flow · commit ae2cce9d593b · 2020-02-20T11:13:03.000+01:00
* chore(spinbuttons): prevent buttons from re-ordering when parent element

* Update form-spinbutton.js

* Update form-spinbutton.spec.js
diff --git a/src/components/form-spinbutton/_spinbutton.scss b/src/components/form-spinbutton/_spinbutton.scss
@@ -9,6 +9,14 @@
     height: auto;
     width: auto;
   }
+  
+  @at-root {
+    // Prevent the buttons from reversing order on in horizontal RTL mode
+    [dir="rtl"] &:not(.flex-column),
+    &[dir="rtl"]:not(.flex-column) {
+      flex-direction: row-reverse;
+    }
+  }
 
   output {
     font-size: inherit;
diff --git a/src/components/form-spinbutton/form-spinbutton.js b/src/components/form-spinbutton/form-spinbutton.js
@@ -546,10 +546,7 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({
           ...this.$attrs,
           role: 'group',
           lang: this.computedLocale,
-          tabindex: isDisabled ? null : '-1',
-          // We want to keep the order of the buttons regardless
-          // of locale (flex will re-order based on rtl/ltr)
-          dir: 'ltr'
+          tabindex: isDisabled ? null : '-1'
         },
         on: {
           keydown: this.onKeydown,
diff --git a/src/components/form-spinbutton/form-spinbutton.spec.js b/src/components/form-spinbutton/form-spinbutton.spec.js
@@ -17,8 +17,6 @@ describe('form-spinbutton', () => {
     expect(wrapper.classes()).toContain('align-items-stretch')
     expect(wrapper.attributes('role')).toEqual('group')
     expect(wrapper.attributes('tabindex')).toEqual('-1')
-    // We always have LTR to ensure the flex order stays ltr
-    expect(wrapper.attributes('dir')).toEqual('ltr')
 
     // Should have 3 child elements (btn, output, btn)
     expect(wrapper.findAll('.b-form-spinbutton > *').length).toBe(3)
@@ -77,8 +75,6 @@ describe('form-spinbutton', () => {
     expect(wrapper.classes()).toContain('align-items-stretch')
     expect(wrapper.attributes('role')).toEqual('group')
     expect(wrapper.attributes('tabindex')).toEqual('-1')
-    // We always have LTR to ensure the flex order stays ltr
-    expect(wrapper.attributes('dir')).toEqual('ltr')
 
     // Should have 3 child elements (btn, output, btn)
     expect(wrapper.findAll('.b-form-spinbutton > *').length).toBe(3)
@@ -136,8 +132,6 @@ describe('form-spinbutton', () => {
     expect(wrapper.classes()).toContain('align-items-stretch')
     expect(wrapper.attributes('role')).toEqual('group')
     expect(wrapper.attributes('tabindex')).toEqual('-1')
-    // We always have LTR to ensure the flex order stays ltr
-    expect(wrapper.attributes('dir')).toEqual('ltr')
 
     // Should have 3 child elements (btn, output, btn)
     expect(wrapper.findAll('.b-form-spinbutton > *').length).toBe(3)
@@ -187,8 +181,6 @@ describe('form-spinbutton', () => {
     expect(wrapper.classes()).not.toContain('align-items-stretch')
     expect(wrapper.attributes('role')).toEqual('group')
     expect(wrapper.attributes('tabindex')).toEqual('-1')
-    // We always have LTR to ensure the flex order stays ltr
-    expect(wrapper.attributes('dir')).toEqual('ltr')
 
     // Should have 3 child elements (btn, output, btn)
     expect(wrapper.findAll('.b-form-spinbutton > *').length).toBe(3)
@@ -774,8 +766,6 @@ describe('form-spinbutton', () => {
     expect(wrapper.classes()).not.toContain('focus')
     expect(wrapper.attributes('role')).toEqual('group')
     expect(wrapper.attributes('tabindex')).toEqual('-1')
-    // We always have LTR to ensure the flex order stays ltr
-    expect(wrapper.attributes('dir')).toEqual('ltr')
 
     const $output = wrapper.find('output')
     expect($output.exists()).toBe(true)
