Commit c6330b3a authored by Maksym Tishchenko's avatar Maksym Tishchenko
Browse files

Dialog focus

parent 1463879f
......@@ -49,6 +49,7 @@ interface IAutocompleteProps {
placeholder?: string;
required?: boolean;
withDetails?: (details: any) => React.ReactNode;
autoFocus?: boolean;
}
interface IAutocompleteState {
......@@ -162,7 +163,7 @@ class Autocomplete extends React.Component<IAutocompleteProps & WithStyles & Wit
};
public render() {
const { label, classes, helperText, renderOption, getOptionLabel, noOptionsText, placeholder, t, required, meta, withDetails } = this.props;
const { label, classes, helperText, renderOption, getOptionLabel, noOptionsText, autoFocus, placeholder, t, required, meta, withDetails } = this.props;
const { error, touched, dirty } = meta;
const { loading, open, options, inputValue } = this.state;
......@@ -200,6 +201,7 @@ class Autocomplete extends React.Component<IAutocompleteProps & WithStyles & Wit
'aria-label': meta.dirty ? t('common:label.fieldModified', { what: label }) : null,
required
} }
autoFocus={ autoFocus }
InputProps={ {
...params.InputProps,
className: dirty ? classes.dirtyField : '',
......
......@@ -59,6 +59,7 @@ function InternalForm({ handleSubmit, onCancelEdit, isNew, apiError }: IInternal
sortByAlphabet
required
validate={ required }
autoFocus
/>
</Grid>
......
......@@ -42,6 +42,7 @@ function AccessionCitationFormInternal(props: IAccessionCitationFormInternal) {
component={ CodeValueField }
codeGroup={ Citation.CodeGroup.typeCode }
label={ t(['client:model.Citation.typeCode', 'client:model._.typeCode']) }
autoFocus
/>
</Grid>
{ [ 'uniqueKey', 'citationYear',
......
......@@ -49,6 +49,7 @@ const AccessionForm = ({ t, onSubmit, initialValues, error, classes }: IAccessio
label={ t(['client:model.Accession.accessionNumberPart1', 'client:model._.accessionNumberPart1']) }
parse={ (v) => v } // allow empty string
defaultValue=""
autoFocus
/>
</Grid>
<Grid item xs={ 12 } sm={ 4 }>
......
......@@ -28,7 +28,7 @@ const AccessionInvAttachForm = ({ t, onSubmit, initialValues, classes, error }:
{ (props: FormRenderProps & WithStyles) => (
<form onSubmit={ props.handleSubmit } id="attachment-form">
<Grid container spacing={ 4 }>
{ [ 'title', 'contentType' ].map((property) => (
{ [ 'title', 'contentType' ].map((property, i) => (
<Grid key={ property } item xs={ 12 } sm={ 6 }>
<Field
placeholder={ t([`client:model.AccessionInvAttach.${property}`, `client:model._.${property}`]) }
......@@ -36,6 +36,7 @@ const AccessionInvAttachForm = ({ t, onSubmit, initialValues, classes, error }:
type="text"
component={ TextField }
label={ t([`client:model.AccessionInvAttach.${property}`, `client:model._.${property}`]) }
autoFocus={ i === 0 }
/>
</Grid>
)) }
......
......@@ -45,6 +45,7 @@ function AccessionInvNameFormInternal(props: IAccessionInvNameFormInternal) {
helperText={ t(['client:model.AccessionInvName.categoryCode_hint', 'client:model._.categoryCode_hint' , 'client:model._._hint']) }
required
validate={ required }
autoFocus
/>
</Grid>
<Grid item xs={ 12 } sm={ 6 }>
......
......@@ -43,6 +43,7 @@ function AccessionIprFormInternal(props: IAccessionIprFormInternal) {
helperText={ t(['client:model.AccessionIpr.typeCode_hint', 'client:model._.typeCode_hint' , 'client:model._._hint']) }
required
validate={ required }
autoFocus
/>
</Grid>
{ [ 'iprNumber', 'iprCropName', 'iprFullName' ].map((property) => (
......
......@@ -41,6 +41,7 @@ function AccessionPedigreeFormInternal(props: IAccessionPedigreeFormInternal) {
codeGroup={ AccessionPedigree.CodeGroup.crossCode }
label={ t(['client:model.AccessionPedigree.crossCode', 'client:model._.crossCode']) }
helperText={ t(['client:model.AccessionPedigree.crossCode_hint', 'client:model._.crossCode_hint' , 'client:model._._hint']) }
autoFocus
/>
</Grid>
<Grid item xs={ 12 } sm={ 6 }>
......
......@@ -42,6 +42,7 @@ function AccessionQuarantineFormInternal(props: IAccessionQuarantineFormInternal
helperText={ t(['client:model.AccessionQuarantine.custodialCooperator_hint', 'client:model._.custodialCooperator_hint' , 'client:model._._hint']) }
required
validate={ required }
autoFocus
/>
</Grid>
<Grid item xs={ 6 }>
......
......@@ -45,6 +45,7 @@ function AccessionSourceFormInternal(props: IAccessionSourceFormInternal) {
helperText={ t(['client:model.AccessionSource.sourceTypeCode_hint', 'client:model._.sourceTypeCode_hint' , 'client:model._._hint']) }
required
validate={ required }
autoFocus
/>
</Grid>
<Grid item xs={ 6 } md={ 4 }>
......
......@@ -42,6 +42,7 @@ function AccessionSourceMapFormInternal(props: IAccessionSourceMapFormInternal)
required
validate={ required }
withDetails={ renderCooperatorDetails }
autoFocus
/>
</Grid>
</Grid>
......
......@@ -24,6 +24,7 @@ const SourceDescriptorCodeForm = ({ t, onSubmit, initialValues, classes, error }
label={ t(['client:model.SourceDescriptorCode.code', 'client:model._.code']) }
required
validate={ required }
autoFocus
/>
</Grid>
{ initialValues && !initialValues.id && (
......
......@@ -24,6 +24,7 @@ const SourceDescriptorCodeLangForm = ({ t, onSubmit, initialValues, classes, err
component={ TextField }
required
validate={ required }
autoFocus
/>
</Grid>
<Grid item xs={ 12 } sm={ 6 }>
......
......@@ -27,6 +27,7 @@ const SourceDescriptorForm = ({ t, onSubmit, initialValues, classes, error }: Fo
placeholder={ t(['client:model.SourceDescriptor.codedName', 'client:model._.codedName']) }
required
validate={ required }
autoFocus
/>
</Grid>
<Grid item xs={ 12 } sm={ 6 }>
......
......@@ -24,6 +24,7 @@ const SourceDescriptorLangForm = ({ t, onSubmit, initialValues, classes, error }
component={ TextField }
required
validate={ required }
autoFocus
/>
</Grid>
<Grid item xs={ 12 } sm={ 6 }>
......
......@@ -37,6 +37,7 @@ const AppSettingForm = ({ t, onSubmit, initialValues, error, classes }: IAppSett
type="text"
placeholder={ t(['client:model.AppSetting.categoryTag', 'client:model._.categoryTag']) }
className={ classes.textField }
autoFocus
/>
</Grid>
<Grid item xs={ 12 } sm={ 6 }>
......
......@@ -29,7 +29,7 @@ function CodeValueFormInternal(props: ICodeValueFormInternal) {
<form onSubmit={ handleSubmit }>
<Grid container spacing={ 4 }>
{ [ 'groupName', 'value' ].map((property) => (
{ [ 'groupName', 'value' ].map((property, i) => (
<Grid key={ property } item xs={ 12 } sm={ 6 }>
<Field
label={ t([ `client:model.TranslatedCodeValue.${property}` ]) }
......@@ -39,6 +39,7 @@ function CodeValueFormInternal(props: ICodeValueFormInternal) {
type="text"
required
validate={ required }
autoFocus={ i === 0 }
/>
</Grid>
)) }
......
......@@ -40,6 +40,7 @@ function CodeValueLangFormInternal(props: ICodeValueLangFormInternal) {
component={ TextField }
required
validate={ required }
autoFocus
/>
</Grid>
<Grid item xs={ 12 } sm={ 6 }>
......
......@@ -39,6 +39,7 @@ interface ICPlProps extends React.ClassAttributes<FieldRenderProps<string, any>>
placeholder?: string;
sortByAlphabet?: boolean,
required?: boolean,
autoFocus?: boolean
}
class CodeValueField extends React.Component<ICPlProps & WithStyles & WithTranslation> {
......@@ -59,7 +60,7 @@ class CodeValueField extends React.Component<ICPlProps & WithStyles & WithTransl
});
public render() {
const { input, codeGroup, codeValuesCall, meta, t, label, helperText, classes, sortByAlphabet, required } = this.props;
const { input, codeGroup, codeValuesCall, meta, autoFocus, t, label, helperText, classes, sortByAlphabet, required } = this.props;
// console.log('Whoo hooo', this.props);
const options = this.getCodeGroupItems(codeValuesCall, codeGroup);
const optionKeys = options && sortByAlphabet ? Object.keys(options).sort((a, b) => options[a].title?.localeCompare(options[b].title)) : options && Object.keys(options)
......@@ -72,6 +73,7 @@ class CodeValueField extends React.Component<ICPlProps & WithStyles & WithTransl
helperText={ helperText ? helperText : options && options[input.value] && options[input.value].description }
fullWidth
variant="filled"
autoFocus={ autoFocus }
{ ...input }
required={ required }
error={ meta && meta.touched && !!meta.error }
......
......@@ -26,9 +26,10 @@ interface IDateAndFormatComponent {
placeholder?: string;
required?: boolean;
shrink?: boolean;
autoFocus?: boolean;
}
const DateAndFormatComponent = ({ name, label, codeLabel, codeGroup, helperText, placeholder, required, shrink }: IDateAndFormatComponent) => {
const DateAndFormatComponent = ({ name, label, codeLabel, codeGroup, helperText, placeholder, required, shrink, autoFocus }: IDateAndFormatComponent) => {
// util
const classes = useStyles();
......@@ -59,6 +60,7 @@ const DateAndFormatComponent = ({ name, label, codeLabel, codeGroup, helperText,
placeholder={ placeholder }
helperText={ helperText }
required={ required }
autoFocus={ autoFocus }
validate={ required ? requiredValidator : undefined }
endAdornment={ <>
{/* <Button className={ classes.adornmentButton } variant="text" color="secondary" onClick={ setNow }>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment