reactjs


Focus kickout on custom redux form input


I got this redux form input :
<Field
component={MyCustomComponent}
name={name}
type={type}
/>
Using this custom element (bootstrap) :
<FormGroup controlId='login'>
<FormControl name={name} placeholder={name} value={props.value} onChange={input.onChange} {...props} />
</FormGroup>
And I use it like so :
<Input type='text' name='email' placeholder='Email' {...email} />
<Input type='password' name='password' placeholder='Password' {...password} />
Something strange happens. When I select the input and I try to write something inside, I am automatically kicked out of the input (focus).
When I try to write it again, everything works.
It's only when I select it for the first time after that the page is loaded.
Full form :
<Form onSubmit={handleSubmit(this.onLogin)}>
<div>
<Input type='text' name='email' placeholder='Email' {...email} />
<Input type='password' name='password' placeholder='Password' {...password} />
</div>
<Button type='submit' bsStyle='primary' bsSize='large' active>
<FormattedMessage
id='login.select-label'
defaultMessage='Login'
/>
</Button>
</Form>
Full input :
export const Input = (props) => {
const { name, type } = props
const MyCustomComponent = ({input}: props) => (
<FormGroup controlId='login'>
<FormControl name={name} placeholder={name} value={props.value} onChange={input.onChange} {...props} />
</FormGroup>
)
return (
<Field
component={MyCustomComponent}
name={name}
type={type}
/>
)
}

Related Links

React Redux … syntax error
How does one set the tabIndex attribute on a draft-js instance?
ComponentDidMount() not working
UIScrollView Canvas Equivalent?
ReactJS - props or propTypes?
React Router V4 structure
Should a view be ordering data?
Unable to load React class component inside other class component
How to get history on react-router v4?
Redux react immutable setIn element changes whole list
react: fade-in/slide-in animation when render component
ReactJS component vendors
css-loader, sass-loader not working webpack 2
The best way to organize your site ready for both PC and SP in reactjs, responsive or 2 sources?
Check data has already been fetched for react-redux in action, reducer or component?
<element>.innerText in component method code does not work properly in enzyme testing. Testing react component with Jest+Enzyme(mount())

Categories

HOME
msbuild
leaflet
weblogic
abc
windows-server-2008
readdir
ebay-api
crm
redhawksdr
datetimepicker
sugarcrm
yuv
sequence
pdf-generation
qt4
ephesoft
sahi
rename
decoding
osrm
yui
react-select
webseal
windows-phone
orange
printf
hl7-fhir
rndis
procedural-generation
functional-dependencies
policy
multilanguage
webmock
mootools
dom4j
multi-user
azure-storage-files
lex
quartz
anonymous-function
denodo
history
dcom
beanshell
dotnet-cli
enet
fluent-nhibernate-mapping
xamarin-test-cloud
sharing
timefield
turbolinks
dimensionality-reduction
virtualenvwrapper
magick.net
system-integration
ideavim
firefox-os
videoview
overlapping
gulp-cdnizer
lytro
log-analysis
veeam
data-quality-services
xcode5
jsonschema2pojo
breeze-sharp
cocos2d-x-2.x
isl
enquire.js
mixradio
android-jack-and-jill
ardor3d
myrrix
dylan
raddatepicker
nsnumber
friendly-url
leap-year
uikit-dynamics
cron4j
custom-cursor
event-propagation
dancer
django-1.4
wxperl
code-organization
mscorlib
cherokee
recess
sipdroid
cpack
fxcopcmd
iphone-maps
database-agnostic
p4.net
mysql-logic
web-search
disk-based

Resources

Encrypt Message