Skip to content
Permalink
Browse files

fix(ui): autofocus amount fields

fix #2046
  • Loading branch information...
mrfelton committed Apr 17, 2019
1 parent a030325 commit c930233651ae6223fe97a427722ef06163b8304b
Showing with 21 additions and 4 deletions.
  1. +19 −3 renderer/components/Channels/ChannelCreateForm.js
  2. +2 −1 renderer/components/UI/CurrencyFieldGroup.js
@@ -33,9 +33,13 @@ import {
* Animation to handle showing/hiding the amount fields.
*/
const ShowHide = Keyframes.Spring({
show: async next => {
show: async (next, cancel, ownProps) => {
await next({ pointerEvents: 'auto' })
await next({ opacity: 1 })
// Focus the amount input if the current step is the form step.
if (ownProps.context.state.step === 'form') {
ownProps.context.focusAmountInput()
}
},
hide: { opacity: 0, pointerEvents: 'none' },
})
@@ -110,12 +114,23 @@ class ChannelCreateForm extends React.Component {
onchainFees: {},
}

amountInput = React.createRef()

componentDidMount() {
const { fetchTickers, queryFees } = this.props
fetchTickers()
queryFees()
}

/**
* Focus the amount input.
*/
focusAmountInput = () => {
if (this.amountInput.current) {
this.amountInput.current.focus()
}
}

/**
* Get the current per byte fee based on the form values.
*/
@@ -257,6 +272,7 @@ class ChannelCreateForm extends React.Component {
<CurrencyFieldGroup
css={{ height: '88px' }}
formApi={this.formApi}
forwardedRef={this.amountInput}
isRequired
validate={this.validateAmount}
validateOnBlur={formState.submits > 0}
@@ -346,15 +362,15 @@ class ChannelCreateForm extends React.Component {
return (
<Panel>
<Panel.Body css={{ position: 'relative' }}>
<ShowHide state={step === 'form' ? 'show' : 'hide'}>
<ShowHide context={this} state={step === 'form' ? 'show' : 'hide'}>
{styles => (
<Box css={{ position: 'absolute' }} style={styles}>
{this.renderFormFields()}
</Box>
)}
</ShowHide>

<ShowHide state={step === 'summary' ? 'show' : 'hide'}>
<ShowHide context={this} state={step === 'summary' ? 'show' : 'hide'}>
{styles => (
<Box style={styles}>{step === 'summary' && this.renderFormSummary()}</Box>
)}
@@ -101,6 +101,7 @@ class CurrencyFieldGroup extends React.Component {
isDisabled,
fiatCurrency,
fiatCurrencies,
forwardedRef,
initialAmountCrypto,
initialAmountFiat,
isRequired,
@@ -118,7 +119,7 @@ class CurrencyFieldGroup extends React.Component {
<CryptoAmountInput
currency={cryptoCurrency}
field="amountCrypto"
forwardedRef={this.forwardedRef}
forwardedRef={forwardedRef}
initialValue={initialAmountCrypto}
isDisabled={isDisabled}
isRequired={isRequired}

0 comments on commit c930233

Please sign in to comment.
You can’t perform that action at this time.