fix(range-input): refine correctly when start is given (#777)

Author: Eunjae Lee

src/components/RangeInput.vue

@@ -11,7 +11,7 @@
     >
       <form
         :class="suit('form')"
-        @submit.prevent="refine({ min: minInput, max: maxInput })"
+        @submit.prevent="refine({ min: pick(minInput, values.min), max: pick(maxInput, values.max) })"
       >
         <label :class="suit('label')">
           <slot name="minLabel" />
@@ -98,6 +98,10 @@ export default {
       maxInput: undefined,
     };
   },
+  updated() {
+    this.minInput = undefined;
+    this.maxInput = undefined;
+  },
   computed: {
     widgetParams() {
       return {
@@ -124,6 +128,13 @@ export default {
     },
   },
   methods: {
+    pick(first, second) {
+      if (first !== null && first !== undefined) {
+        return first;
+      } else {
+        return second;
+      }
+    },
     refine({ min, max }) {
       this.state.refine([min, max]);
     },

src/components/__tests__/RangeInput.js

@@ -307,4 +307,66 @@ describe('refinement', () => {
 
     expect(refine).toHaveBeenLastCalledWith(['100', '106']);
   });
+
+  it('refines correctly when `start` given and user clicks submit without changing input field', () => {
+    const refine = jest.fn();
+    __setState({
+      refine,
+      start: [50, 100],
+      range: {
+        min: 1,
+        max: 5000,
+      },
+    });
+
+    const wrapper = mount(RangeInput, {
+      propsData: {
+        ...defaultProps,
+      },
+    });
+
+    const form = wrapper.find('form');
+    form.trigger('submit');
+
+    expect(refine).toHaveBeenCalledTimes(1);
+    expect(refine).toHaveBeenCalledWith([50, 100]);
+  });
+
+  it('refines correctly even when state changes', () => {
+    const refine = jest.fn();
+    __setState({
+      ...defaultState,
+      refine,
+    });
+
+    const wrapper = mount(RangeInput, {
+      propsData: {
+        ...defaultProps,
+      },
+    });
+
+    // refine for the first time
+    const minInput = wrapper.find('.ais-RangeInput-input--min');
+    minInput.element.value = 10;
+    minInput.trigger('change');
+
+    const maxInput = wrapper.find('.ais-RangeInput-input--max');
+    maxInput.element.value = 100;
+    maxInput.trigger('change');
+
+    const form = wrapper.find('form');
+    form.trigger('submit');
+
+    expect(refine).toHaveBeenCalledTimes(1);
+    expect(refine).toHaveBeenCalledWith(['10', '100']);
+
+    // update the state
+    wrapper.setData({
+      state: { start: [50, 200] }, // min: 10 -> 50, max: 100 -> 200
+    });
+
+    form.trigger('submit');
+    expect(refine).toHaveBeenCalledTimes(2);
+    expect(refine).toHaveBeenCalledWith([50, 200]);
+  });
 });