abinavseelan / react-input-trigger Goto Github PK
View Code? Open in Web Editor NEWReact component for handling character triggers inside textareas and input fields. 🐼
License: MIT License
React component for handling character triggers inside textareas and input fields. 🐼
License: MIT License
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}
>
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?
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.