destroy method for input fields

Author: mProjectsCode

exampleVault/Input Fields/Select and Multi Select.md

@@ -1,8 +1,8 @@
 ---
-select: option 1
+select: option 2
 multiSelect:
   - option 1
-  - option 2
+  - option 3
 ---
 
 ### Select
@@ -23,4 +23,5 @@ option(option 2),
 option(option 3), 
 showcase
 ):multiSelect]
+
 ```

src/InputFieldMarkdownRenderChild.ts

@@ -167,7 +167,7 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 	}
 
 	async onload(): Promise<void> {
-		console.debug('meta-bind | InputFieldMarkdownRenderChild >> load', this);
+		console.log('meta-bind | InputFieldMarkdownRenderChild >> load', this);
 
 		const container: HTMLDivElement = createDiv();
 		container.addClass('meta-bind-plugin-input-wrapper');
@@ -213,8 +213,9 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 	}
 
 	onunload(): void {
-		console.debug('meta-bind | InputFieldMarkdownRenderChild >> unload', this);
+		console.log('meta-bind | InputFieldMarkdownRenderChild >> unload', this);
 
+		this.inputField?.destroy();
 		this.plugin.unregisterInputFieldMarkdownRenderChild(this);
 		this.unregisterSelfFromMetadataManager();
 

src/inputFields/AbstractInputField.ts

@@ -46,4 +46,6 @@ export abstract class AbstractInputField {
 	 * @param container
 	 */
 	abstract render(container: HTMLDivElement): void;
+
+	abstract destroy(): void;
 }

src/inputFields/DateInputField.ts

@@ -141,6 +141,8 @@ export class DateInputField extends AbstractInputField {
 		this.container = container;
 	}
 
+	public destroy(): void {}
+
 	private onMonthChange(value: string): void {
 		this.date.month(value);
 

src/inputFields/DatePicker/DatePickerInputField.ts

@@ -86,4 +86,8 @@ export class DatePickerInputField extends AbstractInputField {
 			},
 		});
 	}
+
+	public destroy(): void {
+		this.component?.$destroy();
+	}
 }

src/inputFields/Editor/EditorInputField.ts

@@ -58,4 +58,8 @@ export class EditorInputField extends AbstractInputField {
 
 		this.component.render();
 	}
+
+	public destroy(): void {
+		this.component?.$destroy();
+	}
 }

src/inputFields/ImageSuggest/ImageSuggestInputField.ts

@@ -116,4 +116,8 @@ export class ImageSuggestInputField extends AbstractInputField {
 
 		this.component.updateValue(this.value);
 	}
+
+	public destroy(): void {
+		this.component?.$destroy();
+	}
 }

src/inputFields/NumberInputField.ts

@@ -55,4 +55,6 @@ export class NumberInputField extends AbstractInputField {
 		});
 		this.numberComponent = component;
 	}
+
+	public destroy(): void {}
 }

src/inputFields/SelectInputField.ts

@@ -81,6 +81,8 @@ export class SelectInputField extends AbstractInputField {
 		this.setValue(this.inputFieldMarkdownRenderChild.getInitialValue());
 	}
 
+	public destroy(): void {}
+
 	disableAllOtherElements(elementId: number): void {
 		for (const selectModalElement of this.elements) {
 			if (selectModalElement.id !== elementId) {

src/inputFields/SliderInputField.ts

@@ -78,4 +78,6 @@ export class SliderInputField extends AbstractInputField {
 
 		this.sliderComponent = component;
 	}
+
+	public destroy(): void {}
 }