namirasoft-site-react 1.3.251 → 1.3.254

package/src/components/NSBoxDate.tsx

@@ -10,9 +10,10 @@ import { Validator } from "../Validator";
 export interface INSBoxDateProps extends IBaseComponentProps, IValidationProps
 {
 	title: string;
-	defaultValue?: string;
-	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 	placeholder?: string;
+	defaultValue?: string;
+	onChanged?: (e: NSBoxDate) => void;
+	onClicked?: (e: NSBoxDate) => void;
 }
 
 export interface INSBoxDateState
@@ -44,41 +45,39 @@ export class NSBoxDate extends React.Component<INSBoxDateProps, INSBoxDateState>
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
 			throw new Error(error);
 		}
 		return this.state.value;
 	}
 	setValue(value: string): void
 	{
-		this.setState({ value });
+		this.setState({ value }, () =>
+		{
+			if (this.props.onChanged)
+				this.props.onChanged(this);
+		});
 	}
 	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
 	{
 		this.setValue(e.target.value);
-		if (this.props.onChanged)
-			this.props.onChanged(e);
 	}
 	override render()
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
+				<div id={this.props.id} className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
 					<input
-						id={this.props.id}
-						value={this.state.value}
-						onChange={this.onChanged}
 						type="date"
+						name={this.props.name}
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
-						onClick={() => { }}
+						value={this.state.value}
+						onChange={this.onChanged}
+						onClick={() => this.props.onClicked}
 					/>
 				</div>
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}

package/src/components/NSBoxDateTime.tsx

@@ -10,9 +10,10 @@ import { Validator } from "../Validator";
 export interface INSBoxDateTimeProps extends IBaseComponentProps, IValidationProps
 {
 	title: string;
-	defaultValue?: string;
-	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 	placeholder?: string;
+	defaultValue?: string;
+	onChanged?: (e: NSBoxDateTime) => void;
+	onClicked?: (e: NSBoxDateTime) => void;
 }
 
 export interface INSBoxDateTimeState
@@ -44,41 +45,39 @@ export class NSBoxDateTime extends React.Component<INSBoxDateTimeProps, INSBoxDa
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
 			throw new Error(error);
 		}
 		return this.state.value;
 	}
 	setValue(value: string): void
 	{
-		this.setState({ value });
+		this.setState({ value }, () =>
+		{
+			if (this.props.onChanged)
+				this.props.onChanged(this);
+		});
 	}
 	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
 	{
 		this.setValue(e.target.value);
-		if (this.props.onChanged)
-			this.props.onChanged(e);
 	}
 	override render()
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
+				<div id={this.props.id} className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
 					<input
-						id={this.props.id}
-						value={this.state.value}
-						onChange={this.onChanged}
 						type="datetime-local"
+						name={this.props.name}
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
-						onClick={() => { }}
+						value={this.state.value}
+						onChange={this.onChanged}
+						onClick={() => this.props.onClicked}
 					/>
 				</div>
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}

package/src/components/NSBoxDouble.tsx

@@ -12,9 +12,10 @@ import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
 export interface INSBoxDoubleProps extends IBaseComponentProps, IValidationProps, IValidationNumberProps 
 {
 	title: string;
-	defaultValue?: number;
-	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 	placeholder?: string;
+	defaultValue?: number;
+	onChanged?: (e: NSBoxDouble) => void;
+	onClicked?: (e: NSBoxDouble) => void;
 }
 
 export interface INSBoxDoubleState
@@ -46,45 +47,42 @@ export class NSBoxDouble extends React.Component<INSBoxDoubleProps, INSBoxDouble
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
 			throw new Error(error);
 		}
 		return this.state.value;
 	}
 	setValue(value: number | undefined): void
 	{
-		this.setState({ value });
+		this.setState({ value }, () =>
+		{
+			if (this.props.onChanged)
+				this.props.onChanged(this);
+		});
 	}
 	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
 	{
 		this.setValue(parseFloat(e.target.value));
-		if (this.props.onChanged)
-			this.props.onChanged(e);
 	}
 	override render()
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_input_parent}   ${this.props.classList?.join(" ")}`} style={this.props.style}>
+				<div id={this.props.id} className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
 					<input
-						id={this.props.id}
+						type="number"
+						name={this.props.name}
+						className={Styles.ns_input}
+						placeholder={this.props.placeholder}
 						value={this.state.value}
 						onChange={this.onChanged}
-						type="number"
+						onClick={() => this.props.onClicked}
 						inputMode="decimal"
-						//todo: check pattern
 						pattern="[0-9]*[.,]?[0-9]*"
-						className={Styles.ns_input}
-						placeholder={this.props.placeholder}
 						style={{ background: `url(${IconInputFloat}) white no-repeat scroll center right 16px` }}
-
 					/>
 				</div>
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}

package/src/components/NSBoxDuration.tsx

@@ -13,9 +13,10 @@ import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
 export interface INSBoxDurationProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, IValidationNumberProps
 {
 	title: string;
-	defaultValue?: string;
-	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 	placeholder?: string;
+	defaultValue?: string;
+	onChanged?: (e: NSBoxDuration) => void;
+	onClicked?: (e: NSBoxDuration) => void;
 }
 
 export interface INSBoxDurationState
@@ -47,42 +48,41 @@ export class NSBoxDuration extends React.Component<INSBoxDurationProps, INSBoxDu
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
 			throw new Error(error);
 		}
 		return this.state.value;
 	}
 	setValue(value: string): void
 	{
-		this.setState({ value });
+		this.setState({ value }, () =>
+		{
+			if (this.props.onChanged)
+				this.props.onChanged(this);
+		});
 	}
 	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
 	{
 		this.setValue(e.target.value);
-		if (this.props.onChanged)
-			this.props.onChanged(e);
 	}
 	override render()
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_input_parent}   ${this.props.classList?.join(" ")}`} style={this.props.style}>
+				<div id={this.props.id} className={`${Styles.ns_input_parent}   ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
 					<input
-						id={this.props.id}
-						value={this.state.value}
-						onChange={this.onChanged}
 						type="time"
+						name={this.props.name}
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
+						value={this.state.value}
+						onChange={this.onChanged}
+						onClick={() => this.props.onClicked}
 						step="2"
 						style={{ background: `url(${IconInputDuration}) white no-repeat scroll center right 16px` }}
 					/>
 				</div>
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}

package/src/components/NSBoxEmail.tsx

@@ -15,9 +15,10 @@ import CopyToClipboard from '../CopyToClipboard';
 export interface INSBoxEmailProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
 {
 	title: string;
-	defaultValue?: string;
-	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 	placeholder?: string;
+	defaultValue?: string;
+	onChanged?: (e: NSBoxEmail) => void;
+	onClicked?: (e: NSBoxEmail) => void;
 }
 
 export interface INSBoxEmailState
@@ -54,10 +55,6 @@ export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailSta
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
 			throw new Error(error);
 		}
 		return this.state.value;
@@ -65,27 +62,30 @@ export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailSta
 
 	setValue(value: string): void
 	{
-		this.setState({ value });
+		this.setState({ value }, () =>
+		{
+			if (this.props.onChanged)
+			{
+				this.props.onChanged(this);
+			}
+		});
 	}
 
 	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
 	{
 		this.setValue(e.target.value);
-		if (this.props.onChanged)
-		{
-			this.props.onChanged(e);
-		}
 	}
 
 	private toggleFullScreen(): void
 	{
 		this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }));
 	}
+
 	override render()
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
+				<div id={this.props.id} className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<div className="d-flex justify-content-between align-items-center">
 						<span className={Styles.ns_input_title}>
 							{this.props.required && <span style={{ color: "red" }}>*</span>} {this.props.title}
@@ -112,14 +112,16 @@ export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailSta
 						</div>
 					</div>
 					<input
-						id={this.props.id}
-						value={this.state.value}
-						onChange={this.onChanged}
 						type="email"
+						name={this.props.name}
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
+						value={this.state.value}
+						onChange={this.onChanged}
+						onClick={() => this.props.onClicked}
 						style={{ background: `url(${IconInputEmail}) white no-repeat scroll center right 16px` }}
 					/>
+					{/* Todo make a new component for fullscreen */}
 					<div className={Styles.ns_input_modal_full_screen} style={{ display: this.state.isFullScreen === false ? "none" : "block" }} >
 						<div>
 							<img
@@ -131,16 +133,15 @@ export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailSta
 								onClick={this.toggleFullScreen}
 							/>
 						</div>
-						<div className={Styles.ns_input_modal_full} onClick={this.toggleFullScreen}>						</div>
+						<div className={Styles.ns_input_modal_full} onClick={this.toggleFullScreen}></div>
 						<textarea
 							value={this.state.value}
 							onChange={(e) => this.setValue(e.target.value)}
 						>
-
 						</textarea>
 					</div>
 				</div>
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}

package/src/components/NSBoxEntity.tsx

@@ -18,9 +18,12 @@ export interface INSBoxEntitOption extends BaseOptionType
 export interface INSBoxEntityProps extends IBaseComponentProps, IValidationProps
 {
 	title: string;
-	options: INSBoxEntitOption[];
+	placeholder?: string;
+	defaultValue?: string;
+	onChanged?: (e: NSBoxEntity) => void;
+	onClicked?: (e: NSBoxEntity) => void;
 	multiple: boolean;
-	placeHolder?: string;
+	options: INSBoxEntitOption[];
 }
 
 export interface INSBoxEntityState
@@ -43,7 +46,7 @@ export class NSBoxEntity extends React.Component<INSBoxEntityProps, INSBoxEntity
 		this.setValues = this.setValues.bind(this);
 		this.setValue = this.setValue.bind(this);
 		this.getValue = this.getValue.bind(this);
-		this.handleChange = this.handleChange.bind(this);
+		this.onChanged = this.onChanged.bind(this);
 	}
 	getError(value: string): string | null
 	{
@@ -76,34 +79,40 @@ export class NSBoxEntity extends React.Component<INSBoxEntityProps, INSBoxEntity
 	}
 	setValue(value: string | null): void
 	{
-		this.setState({ value });
+		this.setState({ value }, () =>
+		{
+			if (this.props.onChanged)
+				this.props.onChanged(this);
+		});
 	}
 	setValues(values: string[]): void
 	{
-		this.setState({ values });
+		this.setState({ values }, () =>
+		{
+			if (this.props.onChanged)
+				this.props.onChanged(this);
+		});
 	}
-	handleChange(value: string | null | string[]): void
+	onChanged(value: string | null | string[]): void
 	{
 		if (this.props.multiple)
-		{
 			this.setValues(value as string[]);
-		} else
-		{
+		else
 			this.setValue(value as string | null);
-		}
 	}
 	override render()
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_input_parent}`}>
+				<div id={this.props.id} className={`${Styles.ns_input_parent}`}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
 					<Select
 						mode={this.props.multiple ? "multiple" : undefined}
 						style={{ width: '100%' }}
 						className={Styles.ns_input_select}
-						placeholder={this.props.placeHolder ?? "Combo Box"}
-						onChange={this.handleChange}
+						placeholder={this.props.placeholder}
+						onChange={this.onChanged}
+						onClick={() => this.props.onClicked}
 						optionLabelProp="label"
 						options={this.props.options}
 						optionRender={(option) => (
@@ -114,7 +123,7 @@ export class NSBoxEntity extends React.Component<INSBoxEntityProps, INSBoxEntity
 						suffixIcon={<img src={IconSelectBox} alt="SelectBox Icon" />}
 					/>
 				</div>
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}

package/src/components/NSBoxEnum.tsx

@@ -21,9 +21,10 @@ export interface INSBoxEnumProps extends IBaseComponentProps, IValidationProps
 	title: string;
 	options: INSBoxEnumOption[];
 	multiple: boolean;
-	placeHolder?: string;
 	customClass?: string;
-	onChange?: () => void;
+	placeholder?: string;
+	defaultValue?: string;
+	onChanged?: (e: NSBoxEnum) => void;
 }
 
 export interface INSBoxEnumState
@@ -60,10 +61,6 @@ export class NSBoxEnum extends React.Component<INSBoxEnumProps, INSBoxEnumState>
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
 			throw new Error(error);
 		}
 		return this.state.value;
@@ -85,16 +82,16 @@ export class NSBoxEnum extends React.Component<INSBoxEnumProps, INSBoxEnumState>
 	{
 		this.setState({ value }, () =>
 		{
-			if (this.props.onChange)
-				this.props.onChange();
+			if (this.props.onChanged)
+				this.props.onChanged(this);
 		});
 	}
 	setValues(values: string[]): void
 	{
 		this.setState({ values }, () =>
 		{
-			if (this.props.onChange)
-				this.props.onChange();
+			if (this.props.onChanged)
+				this.props.onChanged(this);
 		});
 	}
 	onChange(value: string | null | string[]): void
@@ -108,14 +105,14 @@ export class NSBoxEnum extends React.Component<INSBoxEnumProps, INSBoxEnumState>
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_input_parent} ${this.props.customClass}`}>
+				<div id={this.props.id} className={`${Styles.ns_input_parent} ${this.props.customClass}`}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
 					<Select
 						showSearch
 						mode={this.props.multiple ? "multiple" : undefined}
 						style={{ width: '100%' }}
 						className={Styles.ns_input_select}
-						placeholder={this.props.placeHolder ?? "Combo Box"}
+						placeholder={this.props.placeholder ?? "Combo Box"}
 						onChange={this.onChange}
 						optionLabelProp="label"
 						options={this.props.options}
@@ -127,7 +124,7 @@ export class NSBoxEnum extends React.Component<INSBoxEnumProps, INSBoxEnumState>
 						suffixIcon={<img src={IconSelectBox} alt="SelectBox Icon" />}
 					/>
 				</div>
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}

package/src/components/NSBoxErrorNotifier.tsx

@@ -5,14 +5,20 @@ import { IBaseComponentProps } from "../props/IBaseComponentProps";
 export interface INSBoxErrorNotifierProps extends IBaseComponentProps
 {
 	error?: string;
+	clearError: () => void;
 }
 
 export function NSBoxErrorNotifier(props: INSBoxErrorNotifierProps)
 {
+	if (props.error)
+		setTimeout(() =>
+		{
+			props.clearError();
+		}, 5000);
 	return <>
 		{
 			props.error && (
-				<div className="d-flex justify-content-start align-items-center gap-2 ms-2">
+				<div id={props.id} className="d-flex justify-content-start align-items-center gap-2 ms-2">
 					<img
 						className={""}
 						src={Danger}

package/src/components/NSBoxIPV4.tsx

@@ -14,9 +14,10 @@ const IPV4_PATTERN: string = "^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1
 export interface INSBoxIPV4Props extends IBaseComponentProps, IValidationProps, IValidationStringProps
 {
 	title: string;
-	defaultValue?: string;
-	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 	placeholder?: string;
+	defaultValue?: string;
+	onChanged?: (e: NSBoxIPV4) => void;
+	onClicked?: (e: NSBoxIPV4) => void;
 }
 
 export interface INSBoxIPV4State
@@ -49,37 +50,36 @@ export class NSBoxIPV4 extends React.Component<INSBoxIPV4Props, INSBoxIPV4State>
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
 			throw new Error(error);
 		}
 		return this.state.value;
 	}
 	setValue(value: string): void
 	{
-		this.setState({ value });
+		this.setState({ value }, () =>
+		{
+			if (this.props.onChanged)
+				this.props.onChanged(this);
+		});
 	}
 	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
 	{
 		this.setValue(e.target.value);
-		if (this.props.onChanged)
-			this.props.onChanged(e);
 	}
 	override render()
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
+				<div id={this.props.id} className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
 					<input
-						id={this.props.id}
-						value={this.state.value}
-						onChange={this.onChanged}
 						type="text"
+						name={this.props.name}
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
+						value={this.state.value}
+						onChange={this.onChanged}
+						onClick={() => this.props.onClicked}
 						minLength={7}
 						maxLength={15}
 						size={15}
@@ -87,7 +87,7 @@ export class NSBoxIPV4 extends React.Component<INSBoxIPV4Props, INSBoxIPV4State>
 						style={{ background: `url(${IconInputIP}) white no-repeat scroll center right 16px` }}
 					/>
 				</div>
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}

package/src/components/NSBoxIPV6.tsx

@@ -14,9 +14,10 @@ const IPV6_PATTERN: string = '^((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([
 export interface INSBoxIPV6Props extends IBaseComponentProps, IValidationProps, IValidationStringProps
 {
 	title: string;
-	defaultValue?: string;
-	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 	placeholder?: string;
+	defaultValue?: string;
+	onChanged?: (e: NSBoxIPV6) => void;
+	onClicked?: (e: NSBoxIPV6) => void;
 }
 
 export interface INSBoxIPV6State
@@ -49,42 +50,41 @@ export class NSBoxIPV6 extends React.Component<INSBoxIPV6Props, INSBoxIPV6State>
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
 			throw new Error(error);
 		}
 		return this.state.value;
 	}
 	setValue(value: string): void
 	{
-		this.setState({ value });
+		this.setState({ value }, () =>
+		{
+			if (this.props.onChanged)
+				this.props.onChanged(this);
+		});
 	}
 	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
 	{
 		this.setValue(e.target.value);
-		if (this.props.onChanged)
-			this.props.onChanged(e);
 	}
 	override render()
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
+				<div id={this.props.id} className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
 					<input
-						id={this.props.id}
-						value={this.state.value}
-						onChange={this.onChanged}
 						type="text"
+						name={this.props.name}
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
+						value={this.state.value}
+						onChange={this.onChanged}
+						onClick={() => this.props.onClicked}
 						pattern={IPV6_PATTERN}
 						style={{ background: `url(${IconInputIP}) white no-repeat scroll center right 16px` }}
 					/>
 				</div>
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}