namirasoft-site-react 1.3.252 → 1.3.255

package/src/components/NSBoxDuration.tsx

@@ -16,6 +16,7 @@ export interface INSBoxDurationProps extends IBaseComponentProps, IValidationPro
 	placeholder?: string;
 	defaultValue?: string;
 	onChanged?: (e: NSBoxDuration) => void;
+	onClicked?: (e: NSBoxDuration) => void;
 }
 
 export interface INSBoxDurationState
@@ -47,10 +48,6 @@ 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;
@@ -71,20 +68,21 @@ export class NSBoxDuration extends React.Component<INSBoxDurationProps, INSBoxDu
 	{
 		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

@@ -18,6 +18,7 @@ export interface INSBoxEmailProps extends IBaseComponentProps, IValidationProps,
 	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;
@@ -83,11 +80,12 @@ export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailSta
 	{
 		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}
@@ -114,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
@@ -133,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,11 +18,12 @@ export interface INSBoxEntitOption extends BaseOptionType
 export interface INSBoxEntityProps extends IBaseComponentProps, IValidationProps
 {
 	title: string;
-	options: INSBoxEntitOption[];
-	multiple: boolean;
 	placeholder?: string;
 	defaultValue?: string;
 	onChanged?: (e: NSBoxEntity) => void;
+	onClicked?: (e: NSBoxEntity) => void;
+	multiple: boolean;
+	options: INSBoxEntitOption[];
 }
 
 export interface INSBoxEntityState
@@ -45,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
 	{
@@ -78,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) => (
@@ -116,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

@@ -61,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;
@@ -109,7 +105,7 @@ 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
@@ -128,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

@@ -17,6 +17,7 @@ export interface INSBoxIPV4Props extends IBaseComponentProps, IValidationProps,
 	placeholder?: string;
 	defaultValue?: string;
 	onChanged?: (e: NSBoxIPV4) => void;
+	onClicked?: (e: NSBoxIPV4) => void;
 }
 
 export interface INSBoxIPV4State
@@ -49,10 +50,6 @@ 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;
@@ -73,15 +70,16 @@ export class NSBoxIPV4 extends React.Component<INSBoxIPV4Props, INSBoxIPV4State>
 	{
 		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}
@@ -89,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

@@ -17,6 +17,7 @@ export interface INSBoxIPV6Props extends IBaseComponentProps, IValidationProps,
 	placeholder?: string;
 	defaultValue?: string;
 	onChanged?: (e: NSBoxIPV6) => void;
+	onClicked?: (e: NSBoxIPV6) => void;
 }
 
 export interface INSBoxIPV6State
@@ -49,10 +50,6 @@ 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;
@@ -73,20 +70,21 @@ export class NSBoxIPV6 extends React.Component<INSBoxIPV6Props, INSBoxIPV6State>
 	{
 		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: "" })} />
 			</>
 		);
 	}

package/src/components/NSBoxInteger.tsx

@@ -15,6 +15,7 @@ export interface INSBoxIntegerProps extends IBaseComponentProps, IValidationProp
 	placeholder?: string;
 	defaultValue?: number;
 	onChanged?: (e: NSBoxInteger) => void;
+	onClicked?: (e: NSBoxInteger) => void;
 }
 
 export interface INSBoxIntegerState
@@ -46,10 +47,6 @@ export class NSBoxInteger extends React.Component<INSBoxIntegerProps, INSBoxInte
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
 			throw new Error(error);
 		}
 		return this.state.value;
@@ -70,19 +67,20 @@ export class NSBoxInteger extends React.Component<INSBoxIntegerProps, INSBoxInte
 	{
 		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="number"
+						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(${IconInputInteger}) 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/NSBoxLabel.tsx

@@ -3,8 +3,9 @@
 import Styles from './NSBoxLabel.module.css'
 import React from "react";
 import { ReactNode } from "react";
+import { IBaseComponentProps } from '../main';
 
-export interface INSBoxLabelProps
+export interface INSBoxLabelProps extends IBaseComponentProps
 {
     title: string;
     children: ReactNode;
@@ -18,7 +19,7 @@ export class NSBoxLabel extends React.Component<INSBoxLabelProps, INSBoxLabelSta
     override render()
     {
         return (
-            <div className={Styles.ns_tab_item}>
+            <div id={this.props.id} className={`${Styles.ns_tab_item} ${this.props.classList?.join(" ")}`} style={this.props.style}>
                 <span className={`${Styles.ns_box_label_title} ns_font_16_bold`}>{this.props.title}</span>
                 <div>
                     {this.props.children}

package/src/components/NSBoxOTP.tsx

@@ -43,21 +43,23 @@ function NSBoxOTP(props: INSBoxOTPProps)
     };
 
     return (
-        <div style={{ display: 'flex', gap: '10px' }}>
-            {values.map((value, index) => (
-                <input
-                    key={index + 10}
-                    ref={el => inputsRef.current[index] = el}
-                    type="text"
-                    value={value}
-                    onChange={handleChange(index)}
-                    onKeyDown={handleKeyDown(index)}
-                    maxLength={1}
-                    style={{ width: '30px', textAlign: 'center' }}
-                    className={Styles.ns_otp_input}
-                />
-            ))}
-        </div>
+        <div id={props.id} className={`${Styles.ns_input_parent} ${props.classList?.join(" ")}`} style={{ ...props.style, display: 'flex', gap: '10px' }}>
+            {
+                values.map((value, index) => (
+                    <input
+                        key={index + 10}
+                        ref={el => inputsRef.current[index] = el}
+                        type="text"
+                        value={value}
+                        onChange={handleChange(index)}
+                        onKeyDown={handleKeyDown(index)}
+                        maxLength={1}
+                        style={{ width: '30px', textAlign: 'center' }}
+                        className={Styles.ns_otp_input}
+                    />
+                ))
+            }
+        </div >
     );
 };
 

package/src/components/NSBoxPassword.tsx

@@ -15,6 +15,7 @@ export interface INSBoxPasswordProps extends IBaseComponentProps, IValidationPro
 	placeholder?: string;
 	defaultValue?: string;
 	onChanged?: (e: NSBoxPassword) => void;
+	onClicked?: (e: NSBoxPassword) => void;
 }
 
 export interface INSBoxPasswordState 
@@ -46,10 +47,6 @@ export class NSBoxPassword extends React.Component<INSBoxPasswordProps, INSBoxPa
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
 			throw new Error(error);
 		}
 		return this.state.value;
@@ -70,19 +67,20 @@ export class NSBoxPassword extends React.Component<INSBoxPasswordProps, INSBoxPa
 	{
 		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="password"
+						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(${IconInputString}) 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/NSBoxPhone.tsx

@@ -20,6 +20,7 @@ export interface INSBoxPhoneProps extends IBaseComponentProps, IValidationProps,
 	placeholder?: string;
 	defaultValue?: string;
 	onChanged?: (e: NSBoxPhone) => void;
+	onClicked?: (e: NSBoxPhone) => void;
 }
 
 export interface INSBoxPhoneState
@@ -52,12 +53,7 @@ export class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneSta
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 8000);
 			throw new Error(error);
-
 		}
 		return this.state.value;
 	}
@@ -74,7 +70,6 @@ export class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneSta
 		return (
 			<>
 				<div id={this.props.id} className={`${Styles.ns_input_phone_parent} ${Styles.ns_input_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} style={this.props.style}>
-
 					<div className="d-flex justify-content-between align-item-center">
 						<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
 						<div className="d-flex gap-1">
@@ -108,7 +103,7 @@ export class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneSta
 						}}
 					/>
 				</div >
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}

package/src/components/NSBoxPrice.tsx

@@ -15,6 +15,7 @@ export interface INSBoxPriceProps extends IBaseComponentProps, IValidationProps,
 	placeholder?: number;
 	defaultValue?: number;
 	onChanged?: (e: NSBoxPrice) => void;
+	onClicked?: (e: NSBoxPrice) => void;
 }
 
 export interface INSBoxPriceState
@@ -46,10 +47,6 @@ export class NSBoxPrice extends React.Component<INSBoxPriceProps, INSBoxPriceSta
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
 			throw new Error(error);
 		}
 		return this.state.value;
@@ -70,21 +67,22 @@ export class NSBoxPrice extends React.Component<INSBoxPriceProps, INSBoxPriceSta
 	{
 		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?.toString.name}
 						value={this.state.value}
 						onChange={this.onChanged}
-						type="number"
+						onClick={() => this.props.onClicked}
 						step="0.01"
 						min="0"
-						className={Styles.ns_input}
-						placeholder={this.props.placeholder?.toString.name}
 						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/NSBoxString.tsx

@@ -18,6 +18,7 @@ export interface INSBoxStringProps extends IBaseComponentProps, IValidationProps
 	placeholder?: string;
 	defaultValue?: string;
 	onChanged?: (e: NSBoxString) => void;
+	onClicked?: (e: NSBoxString) => void;
 }
 
 export interface INSBoxStringState 
@@ -51,12 +52,7 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
-			// throw new Error(error);
-			return '';
+			throw new Error(error);
 		}
 		return this.state.value;
 	}
@@ -80,7 +76,7 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} style={this.props.style}>
+				<div id={this.props.id} className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} 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}
@@ -105,14 +101,16 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
 						</div>
 					</div>
 					<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}
 						style={{ background: `url(${IconInputString}) 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,7 +129,7 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
 						></textarea>
 					</div>
 				</div>
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}