Text field below a group should automatically resize to fit the text

[tkriplean]

I'd like to describe what I'm currently doing in my group (my office), and update this over time.

But I have to manually resize the text field, such as when I'm updating what I'm doing.

Likewise, I'd like to read what other people are up to, but if they've written something longer, I have to manually resize.

This problem is compounded because whenever someone joins or leave a group, the manual text height setting is reset.

[toomim]

I think we have some statebus code in cheeseburger for auto-resizing textboxes that we could port pretty easily.

[toomim]

Found it:

dom.AUTOSIZEBOX = ->
  TEXTAREA
    ref: 'textbox'
    rows: 1
    placeholder: @props.placeholder
    onKeyDown: (e) =>@props.onKeyDown?(e)
    onChange: (e) => @props.onChange?(e)
    style: @props.style 
    value: @props.value

resizebox = (target) ->
  while(target.rows > 1 && target.scrollHeight < target.offsetHeight)
    target.rows--
  while(target.scrollHeight > target.offsetHeight)
    target.rows++
dom.AUTOSIZEBOX.up      = -> resizebox(@refs.textbox.getDOMNode())
dom.AUTOSIZEBOX.refresh = -> resizebox(@refs.textbox.getDOMNode())

Example usage:

            AUTOSIZEBOX
              style:
                width: 240
                border: '1px solid transparent'
                fontSize: 14
                resize: 'none'
              value: listitemstate.text
              onChange: (e) -> listitemstate.text = e.target.value; save(listitemstate)
              # defaultContent: '*'
              editable: true
              # placeholder: 'Reply ...'

[tkriplean]

Heh I've got similar code in considerit :)

[toomim]

@tkriplean We could put this into a general library. Statebus v5 lets you include client libraries via <script> tags in the html, that define new dom.* views/components for you to use. It's not documented yet though.

[toomim]

Fixed. I haven't put it in a general library, but it's in tawk.space.