diff --git a/client/src/components/Settings/Clients/Form.js b/client/src/components/Settings/Clients/Form.js index 1e33b0f2..2bf983ea 100644 --- a/client/src/components/Settings/Clients/Form.js +++ b/client/src/components/Settings/Clients/Form.js @@ -78,7 +78,7 @@ const renderFieldsWrapper = (placeholder, buttonTitle) => placeholder={placeholder} isActionAvailable={index !== 0} removeField={() => fields.remove(index)} - normalize={data => data && data.trim()} + normalizeOnBlur={data => data.trim()} /> ))} @@ -127,7 +127,7 @@ let Form = (props) => { type="text" className="form-control" placeholder={t('form_client_name')} - normalize={data => data && data.trim()} + normalizeOnBlur={data => data.trim()} /> diff --git a/client/src/helpers/form.js b/client/src/helpers/form.js index 41483fba..2a09236c 100644 --- a/client/src/helpers/form.js +++ b/client/src/helpers/form.js @@ -2,13 +2,16 @@ import React, { Fragment } from 'react'; import { Trans } from 'react-i18next'; import PropTypes from 'prop-types'; import { R_IPV4, R_MAC, R_HOST, R_IPV6, R_CIDR, UNSAFE_PORTS } from '../helpers/constants'; +import { createOnBlurHandler } from './helpers'; export const renderField = (props, elementType) => { const { - input, id, className, placeholder, type, disabled, + input, id, className, placeholder, type, disabled, normalizeOnBlur, autoComplete, meta: { touched, error }, } = props; + const onBlur = event => createOnBlurHandler(event, input, normalizeOnBlur); + const element = React.createElement(elementType, { ...input, id, @@ -17,6 +20,7 @@ export const renderField = (props, elementType) => { autoComplete, disabled, type, + onBlur, }); return ( @@ -35,6 +39,7 @@ renderField.propTypes = { type: PropTypes.string, disabled: PropTypes.bool, autoComplete: PropTypes.bool, + normalizeOnBlur: PropTypes.func, }; export const renderTextareaField = props => renderField(props, 'textarea'); @@ -52,37 +57,43 @@ export const renderGroupField = ({ isActionAvailable, removeField, meta: { touched, error }, -}) => ( - -
- - {isActionAvailable && - - - - } -
- {!disabled && - touched && - (error && {error})} -
-); + normalizeOnBlur, +}) => { + const onBlur = event => createOnBlurHandler(event, input, normalizeOnBlur); + + return ( + +
+ + {isActionAvailable && + + + + } +
+ {!disabled && + touched && + (error && {error})} +
+ ); +}; export const renderRadioField = ({ input, placeholder, disabled, meta: { touched, error }, diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js index 8f9556af..8fc9d36a 100644 --- a/client/src/helpers/helpers.js +++ b/client/src/helpers/helpers.js @@ -373,3 +373,19 @@ export const getParamsForClientsSearch = (data, param) => { return acc; }, {}); }; + +/** + * Creates onBlur handler that can normalize input if normalization function is specified + * + * @param {Object} event + * @param {Object} event.target + * @param {string} event.target.value + * @param {Object} input + * @param {function} input.onBlur + * @param {function} [normalizeOnBlur] + * @returns {function} + */ +export const createOnBlurHandler = (event, input, normalizeOnBlur) => ( + normalizeOnBlur + ? input.onBlur(normalizeOnBlur(event.target.value)) + : input.onBlur());