Viewport scroll problem with FlexGrid and custom editors such as InputNumber

Viewport scroll problem with FlexGrid and custom editors such as InputNumber

Posted by: stephen on 3 August 2021, 8:02 pm EST

• 

  stephen

  • Post Options:
  • Link
    Copy

  Posted 3 August 2021, 8:02 pm EST

  I am seeing the problem below with Android version of Chrome on both my phone and tablet. I have not tested with any other mobile browsers. The same works 100% fine on desktop.

  I am using a simple FlexGrid with inline editing. Some columns will contain numbers only, and therefore I want to use the numeric (onscreen) keyboard for input for mobile devices. To achieve this, I use InputNumber as custom editor.

  The trouble starts as soon as I touch cell in the grid. The viewport jumps back to the top of the page, putting the grid cell being edited under the onscreen keyboard. I then I have to scroll down to see what I am busy typing into the grid.

  The problem is easy to demonstrate:
  
  [ul]

  • “Open your “Custom Editors” demo in Android Chrome: https://www.grapecity.com/wijmo/demos/Grid/Editing/CustomEditors/purejs”

  • “Then edit any of the cells that accept keyboard entry, e.g. Time, Country, Product or Amount columns.”

  [/ul

  Thanks for looking into this.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 August 2021, 12:05 am EST

  Hi Stephen,

  I am afraid I was unable to replicate the issue at my end. Please refer to the screenshot attached for reference.

  https://www.dropbox.com/s/7y7yeatsqzav80q/Chrome.mp4?dl=0

  Can you please let me know whether I am missing something in order to replicate the issue?
  
  Also, can you share the device which you are using?

  Regards,
  
  Ashwin

• 

  stephen

  • Post Options:
  • Link
    Copy

  Posted 5 August 2021, 12:14 am EST

  Thanks for checking into this, Ashwin.

  I have now tested on my wife’s phone (Android Chrome) too, and got exact same scrolling behaviour. Somehow your browser is working fine but all three mobile browsers on my end not. Very strange…

• 

  stephen

  • Post Options:
  • Link
    Copy

  Posted 5 August 2021, 12:19 am EST

  Sorry, you asked for device info:

  • “My phone: OnePlus 5T”

  • “Tablet: Galaxy Tab A (2019)”

  • “Wife’s phone: Moto G8 Plus”

  All three of them run Android Chrome ver. 92.0.4515.115.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 6 August 2021, 1:51 am EST

  Hi Stephen,

  Thanks for the information. I tested it on some other devices and I was able to replicate it on some of them.
  
  But it doesn’t seem to be an issue in the controls rather than the demos. Can you try with a different sample altogether and verify whether the issue exists or not?

  ~regards

• 

  stephen

  • Post Options:
  • Link
    Copy

  Posted 6 August 2021, 1:22 pm EST

  Hi Ashwin,

  I am relieved to hear that you are seeing the same on some other devices. It means that I am not complete crazy

  The problem is more widespread than the demo. I encountered the problem in my own app, and then compared with the demo. I thought it would be easiest to report the demo than to try share my source code.

  To check the behaviour in my app, please go to https://centroid.app/concrete-section. The “Design loads” grid is a MultiRow with the M_f and V_f columns using InputNumber as custom editor.

  Here is the layout definition with the custom editors:

  
    layoutThreeRowsData = [
      {
        header: 'Design Loads', colspan: 4, cells: [
  
          {binding: 'case', colspan: 2},
          {binding: 'M_f', align: 'right', format: 'n1', width: '*', editor: new InputNumber(document.createElement('div'), {inputType: 'tel'})},
          {binding: 'V_f', align: 'right', format: 'n1', width: '*', editor: new InputNumber(document.createElement('div'), {inputType: 'tel'})},
  
          {binding: 'A_s_bot', cssClass: 'calculated-cell', align: 'right', format: 'n0', width: '*'},
          {binding: 'A_s_top', cssClass: 'calculated-cell', align: 'right', format: 'n0', width: '*'},
          {binding: 'A_v', cssClass: 'calculated-cell', align: 'right', format: 'n3', width: '*'},
          {binding: 'calcs', cellTemplate: this.detailsLink, cssClass: 'calculated-cell', align: 'center', width: '*'},
  
          {binding: 'M_r', cssClass: 'calculated-cell', align: 'right', format: 'n1', width: '*'},
          {binding: 'M_r_f_ratio', cssClass: 'calculated-cell', align: 'right', width: '*'},
          {binding: 'V_r', cssClass: 'calculated-cell', align: 'right', format: 'n1', width: '*'},
          {binding: 'V_r_f_ratio', cssClass: 'calculated-cell', align: 'right', width: '*'},
        ]
      }
    ];
  
  

  I hope this helps.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 9 August 2021, 2:06 am EST

  Hi Stephen,

  Thanks for the website link. I have forwarded this issue to the dev team for further investigation. The internal tracking id of the case is WJM-20642. I will update you once I will hear from them.

  ~regards