1. Home
  2. Forum
  3. Vue
  4. Method getText() returns incorrectly formatted value when format got updated

Method getText() returns incorrectly formatted value when format got updated

When the format property of the NumericTextBoxComponent gets updated (after the component is mounted), the method getText() does not directly reflect the format change. I fiddled around a bit and found out, that only when calling getText() in a setTimeout() method, the returned value reflects the updated format.

Why is this so? And why doesn't nextTick() reflect the change in the value returned from getText()???

Please see the attached example with comments of a storybook story...

Changing the initial format string from "####" to "#,###" produces follwing output:
>>>
created
NumericTextBoxComponent.stories.js:20 updated 4711
NumericTextBoxComponent.stories.js:23 text in nextTick: 4711
NumericTextBoxComponent.stories.js:28 text in setTimeout: 4.711
<<<

Thanks in advance,
Marc

Attachment: NumericTextBoxComponent.stories_7773e217.zip

7 Replies
SP Sureshkumar P Syncfusion Team November 18, 2019 01:04 PM UTC

Hi Raouf, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement with shared code. the reported issue is not reproduced in our end. We have created a sample based on your requirement and shared code block. In this sample we have updated the format property dynamically and get the value to getText method. 
 
 
If possible, could you reproduce your reported issue in the attached sample and reverted to us. This will help us to provide exact scenario at earliest.  
 
 
Regards, 
Sureshkumar P 


ME Marc Eilens November 18, 2019 01:19 PM UTC

Hello Sureshkumar P,

I updated your project with another button. One button now enables grouping, the other one disables it.

If you check the console logs, you will see that only the log statement that is executed in setTimeout() reflects the updated format correctly.

So please have another look into this problem.

Thanks in advance,
Marc

Attachment: quickstart_updated_e14b7f03.zip

SP Sureshkumar P Syncfusion Team November 19, 2019 05:13 AM UTC

Hi Marc, 
 
Thanks for your reply. 
 
We have validated your attached sample. In the sample, you have changed the numerictextbox component format property dynamically based on button click. Therefore, we suggest you to use our dataBind() method to reflects our dynamic property change immediately to the component.  
 
Kindly refer to the below code block 
 
buttonClick: function(useGrouping) { 
      if (useGrouping) { 
        this.$refs.numeric.ej2Instances.format = "#,###.##"; 
        this.$refs.numeric.ej2Instances.dataBind(); 
      } else { 
        this.$refs.numeric.ej2Instances.format = "#.##"; 
        this.$refs.numeric.ej2Instances.dataBind(); 
      } 
      console.log("updated", this.$refs.numeric.getText()); 
      this.$nextTick(function() { 
        // the value of getText() does not yet match the updated format pattern 
        console.log("text in nextTick:", this.$refs.numeric.getText()); 
      }); 
      const that = this; 
      setTimeout(function() { 
        // only here in setTimeout the value from getText() matches the updated format pattern 
        console.log("text in setTimeout:", that.$refs.numeric.getText()); 
      }, 0); 
    } 
 
 
We have modified your sample based on your requirement. Please find the sample here: https://www.syncfusion.com/downloads/support/forum/149095/ze/numericTextBox-2036398865  
 
Regards, 
Sureshkumar P 


ME Marc Eilens November 19, 2019 09:28 AM UTC

Hello Sureshkumar P,

the solution you provided works.

BUT I find it strange that as a user of the vue component I have to deal with all these "internals" in the first place...

Because instead of setting the format with:

this.$refs.numeric.ej2Instances.format = "#,###.##";

I would like to be able to just change the property to which the NumericTextBoxComponent is bound like this:

this.format = "#,###.##";

Why do I have to deal with the ej2Instance instead? Shouldn't the NumericTextBoxComponent react on the changed property (e.g. in an updated() lifecycle hook) and do the necessary steps (here: call the dataBind() method)?

As a workaround, I can use the proposed solution.

Thanks in advance,
Marc



SP Sureshkumar P Syncfusion Team November 20, 2019 01:47 PM UTC

Hi Marc, 

We would like to inform you that, if you initialize any property in the component definition then we can change the value of the property using this keyword (this.format). Else, we can take and change the value of the property by using Vue reference as we mentioned in the previous update.  

<template> 
  <div id="app"> 
    <ejs-numerictextbox 
      ref="numeric" 
      :value="value" 
      :format="format" 
    ></ejs-numerictextbox> 
    <input 
      type="button" 
      value="format with grouping " 
      v-on:click="buttonClick(true)" 
    /> 
    <input 
      type="button" 
      value="format without grouping" 
      v-on:click="buttonClick(false)" 
    /> 
  </div> 
</template> 
<script> 
import Vue from "vue"; 
import { NumericTextBoxPlugin } from "@syncfusion/ej2-vue-inputs"; 

Vue.use(NumericTextBoxPlugin); 
export default { 
  data() { 
    return { 
      value: 4711, 
      format: "####" 
    }; 
  }, 
  methods: { 
    buttonClick: function(useGrouping) { 
      if (useGrouping) { 
        this.format = "#,###.##"; 
        this.$refs.numeric.dataBind(); 
      } else { 
        this.format = "#.##"; 
        this.$refs.numeric.dataBind(); 
      } 
      console.log("updated", this.$refs.numeric.getText()); 
      this.$nextTick(function() { 
        // the value of getText() does not yet match the updated format pattern 
        console.log("text in nextTick:", this.$refs.numeric.getText()); 
      }); 
      const that = this; 
      setTimeout(function() { 
        // only here in setTimeout the value from getText() matches the updated format pattern 
        console.log("text in setTimeout:", that.$refs.numeric.getText()); 
      }, 0); 
    } 
  } 
}; 
</script> 



We have prepared the sample and attached it below. 

 
Regards, 
Sureshkumar P 


ME Marc Eilens November 21, 2019 06:58 AM UTC

Dear Sureshkumar P,

sorry, but did you test the solution that you sent me? It simply does NOT work. Please check the console output in the browser. There you can see that the getText() method returns an old value that was valid before changing the format. Only in the getText() invoked in a setTimeout call gives the correct value matching the changed format.

Also calling dataBind() after setting the format, which I think as being non Vue style, does not help here (since it is already in your example). The "format" data attribute should be reactive, thus, why should I have to do anything else (i.e. calling dataBind()) than changing its value? 

Kind regards,
Marc

SP Sureshkumar P Syncfusion Team November 21, 2019 11:47 AM UTC

Hi Marc, 
 
We have validated your explained scenario. We confirmed this as a bug in our end. And the fix will be available our first patch release after volume 4 release. Which is expected to be rolled out on January 1st week 2020. We appreciate your patience until then. 
 
You can track the status of the bug in the below feedback link from below.   
  
 
Regards, 
Sureshkumar P 


Loader.
Up arrow icon