drop down blocks text typed.

[japrogramer]

after the trigger causes the dropdown to show the actual dropdown element cuts off the text after by about half

I suggest that we take into account the elements line height , the random hovering button is a firefox bug.

something like so

function isDigit(charCode: number): boolean {
    return charCode >= CHAR_CODE_ZERO && charCode <= CHAR_CODE_NINE
}

export function getLineHeightPx(node: HTMLElement): number {
  const computedStyle = window.getComputedStyle(node)

  // If the char code starts with a digit, it is either a value in pixels,
  // or unitless, as per:
  // https://drafts.csswg.org/css2/visudet.html#propdef-line-height
  // https://drafts.csswg.org/css2/cascade.html#computed-value
  if (isDigit(computedStyle.lineHeight.charCodeAt(0))) {
    // In real browsers the value is *always* in pixels, even for unit-less
    // line-heights. However, we still check as per the spec.
    if (
      isDigit(
        computedStyle.lineHeight.charCodeAt(
          computedStyle.lineHeight.length - 1,
        ),
      )
    ) {
      return (
        parseFloat(computedStyle.lineHeight) *
        parseFloat(computedStyle.fontSize)
      )
    } else {
      return parseFloat(computedStyle.lineHeight)
    }
  }
}

[jukben]

Indeed, it could be computed automatically, however, I'm not planning to do it any time soon. The all you need is to tweak styles bounded to rta__autocomplete (or pass your own style, or className) class to suit your case.

[japrogramer]

I tried to use the dropdownStyle but it seems that the position top and bottom are passed to Autocomplete are computed on the componentDidUpdate so there is no way to change the top bottom like that.

dropdownStyle={{zIndex: 2, top, bottom}}

[jukben]

Yep. That's correct. You should use margin https://github.com/webscopeio/react-textarea-autocomplete/blob/master/style.css#L29

I'm closing this but let's continue if you need, but I hope in your case, you just need to tune margin-top, margin-left values.