Method didMount

src/components/text-input/index.ts:117–174

()

	}

	override didMount(): Promise<void> {
		this.addEventListener('submit', (event) => {
			event.stopPropagation();
			event.preventDefault();
			let inputValue: string | string[] = '';
			// Retrieve the value submitted
				if (this.props.type === 'radio') {
				const checked = this.element().find('[data-content="field"]:checked');
				if (checked.exists()) {
					inputValue = checked.value() as string;
				} else {
					inputValue = '';
				}

			} else if (this.props.type === 'checkbox') {
				inputValue = [];
				this.element().find('[data-content="field"]:checked').each((element) => {
					(inputValue as string[]).push($_(element).value() as string);
				});
			} else {
				inputValue = this.content('field').value() as string;
			}

			// Run the validation function asynchronously. If it returns false,
			// it means the input is invalid and we have to show the warning message.
			this.engine.assertAsync(this.props.validate as (...args: unknown[]) => unknown, this.engine, [inputValue]).then(() => {
				// Once validation was done, we run the Save function where usually,
				// the input received will be saved on the storage or used for other
				// actions.
				this.engine.assertAsync(this.props.onSubmit as (...args: unknown[]) => unknown, this.engine, [inputValue]).then(() => {
					// Nothing to do here
				}).catch(() => {
					// Nothing to do here
				}).finally(() => {
					this.remove();
					this.props.callback();
				});
			}).catch(() => {
				// Show the warning message since the input was invalid
				this.content('warning').text(this.engine.replaceVariables(this.props.warning));
			});
		});

		// For inputs that require a text field, we place the default value after
		// mount instead of in-creation because this way, the cursor will be placed
		// at the end of the default value. If we did it in-creation, it would
		// be placed at the start.
		const text: TextInputType[] = ['text', 'textarea', 'password', 'email', 'url', 'number', 'color'];
		const { type, default: defaultValue } = this.props;

		if (text.indexOf(type) > -1) {
			if (defaultValue !== null && defaultValue !== '') {
				this.content('field').value(defaultValue);
			}
		}
		this.content('field').get(0)?.focus();
		return Promise.resolve();
	}