abinavseelan / react-input-trigger Goto Github PK

hi，react-input-trigger don't work in safiri，the demo can reappear

Code :

<InputTrigger trigger={{ keyCode: 50, shiftKey: true, }} > <textarea /> </InputTrigger>

When i press '@' key i have automatically the following error : "this.props.inputRef is not a function"

I am using a functional component and I am unable to set the endTrigger with a set state function

<InputTrigger
        trigger={{
          keyCode: 50,
          shiftKey: true,
        }}
        onType={toggleSuggesting}
        onCancel={toggleSuggesting}
        endTrigger={setEndMention}
      >

after I run $ yarn add react-input-trigger, I've ended up with this:

I got the dev build instead the prod build. Please fix so I can use this cool package :)

as a workaround for now I've copy pasted the package into my source code, and it works

Hi,

I wanted to implement react-input-trigger to project I work on. There I use MaterialUI and TextFields.
However react-input-trigger fails with onStart

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

My component is as simple as:

const TextFieldComponent = ({ input, meta: { touched, error }, ...custom }) => {

  const isError = Boolean(touched && error)
  let helperText = custom.label !== custom.helperText ? custom.helperText : undefined
  if (!helperText && error) {
    helperText = error
  }

  return <InputTrigger
    trigger={{
      keyCode: 51,// hash code
      shiftKey: true,
    }}
    onStart={(metaData) => { console.log(metaData) }}
  >
    <TextField
      error={isError}
      {...input}
      {...custom}
      helperText={helperText}
      variant="outlined"
      margin="normal"
    />
  </InputTrigger>
}

Seems error comes from dependency textarea-caret-position https://github.com/component/textarea-caret-position/blob/master/index.js#L71

Any idea how to make it work? It seems to me that it works only with html tags (textarea or input) and not React components, am I right?

I have a div which has contenteditable={true}, some way I can use this?

Description

Currently the component renders the children input field(s) / textarea(s) by wrapping them in an intermediate <div> tag, which handles events.

This however introduced styling issues, especially with flex styles, since the intermediate <div> enforced block styling.

The fix for this was to pass on user styles, classnames and other information on to the component as props.

I am looking for a feature like slack where user can trigger different action through different input ("/" for command actions and "@" for user mentions). will this library support that?

at getCaretCoordinates (index.js:71)
at getHookObject (react-input-trigger.js:34)
at eval (react-input-trigger.js:127)
at nrWrapper (EMNoLKlqSz:11)

Hello,

I'm trying to implement a mention system on my react app.
I noticed that the keycode:50 and shiftkey:true will still be triggered even though the input will be '2' on an azerty keyboard. Knowing people might potentially use an azerty keyboard this is pretty blocking. Is there a way to trigger not based on a keyCode, but with a simple string comparison ?

Thanks