How to measure a dom element before it is inserted

1

I have implemented a textarea that grows according to the length. I simply add one to the rows until the scrollHeight no longer exceeds the clientHeight.

To avoid the deprecation warnings I put the measurement on the afterRender queue. It works fine, but when the content grows the rows are increased only after the render and so a scroll bar pops up and disappears (also resetting the cursor to the end of the text).

I have been trying to avoid the flicker of the scrollbar by somehow access the element before it is inserted. The willInsertElement provides access to element, but it seems to be only called on the first render. What are your thoughts on a work around at the moment?

  didReceiveAttrs(){
    this.set('model', Object.assign({}, this.get('model'), {
      text: this.get('value'),
      rows: this.get('min-rows')
    }));
    Ember.run.scheduleOnce('afterRender', this, 'growRows');
  },
  growRows() {
    const el = this.$('textarea')[0];
    const rows = this.get('model.rows');
    if(el.scrollHeight > el.clientHeight) {
      this.set('model', Object.assign({}, this.get('model'), {
        rows: rows + 1
      }));
      Ember.run.scheduleOnce('afterRender', this, 'growRows');
    }
  },
  callUpdate(val){
    this.sendAction('update', val);
    Ember.run.scheduleOnce('afterRender', this, 'growRows');
  },
  actions: {
    throttledUpdate(val){
      Ember.run.throttle(this, 'callUpdate', val, 200);
    }
  }

I have also asked this question at the measure hook rfc Add measure hook · Issue #134 · emberjs/rfcs · GitHub

2

hit me up on Slack, I’ve been doing a lot of work in this area and TL;DR there’s never a “simple” answer, it depends on other app requirements. Doing this almost always means you need to force at least one layout, but there are some clever ways you can do it while forcing layout less.

3

(I’m @runspired on slack btw)

4

I was afraid of that. There is a rfc for a measure hook which sound like a great solution, but there has not been any activity. Another issue I ran into is that after the scroll bar has appeared and disappeared the cursor is set at the end of the non-whitespace contents of the textarea. @jthoburn thank you for your offer and reply.

5

@remkoboschker there is actually very active work on it, I’m the person working on it :stuck_out_tongue:

I gave a presentation on what I’ve been working on at WickedGood, here are the slides. Beyond 60fps

6

Wow, that is a lot of info and seems an ambitious project. (hammer.js looks very interesting as well by the way). How does all of this align with with Glimmer?