Save Settings with DropdownComponent

Developers: Plugin & API
1

Hi guys,

im new to obsidian api dev. So please forgive me my nobness :grinning_face_with_smiling_eyes:I have used and implemented the “Sample Plugin” from the Obsidian api Repo. And now I was trying to add a new Setting to my plugin (A Dropdownmenu with 2 options). But somehow it cant save the selection being made, when in the plugin settings. For example: I switch to another plugin settings tab, and when I switch back, the selection being made in the dropdown is not shown. I checked the console. It says no errors whatsoever, so I think it’s a UI issue, but I am not sure. Here are parts of my code used in the main.ts from the Sample-Plugin:

interface MyPluginSettings {
	repetitions: string;
}

const DEFAULT_SETTINGS: MyPluginSettings = {
	repetitions: '1'
}

//later in the main.ts:

class SampleSettingTab extends PluginSettingTab {
	plugin: MyPlugin;

	constructor(app: App, plugin: MyPlugin) {
		super(app, plugin);
		this.plugin = plugin;
	}

	display(): void {
		let {containerEl} = this;

		containerEl.empty();

		containerEl.createEl('h2', {text: 'Full-Repetition Settings'});

		new Setting(containerEl)
			.setName('Number of repetitions')
			.setDesc('Here you can set your default number for repetition reminders')
			.addDropdown(dropDown => {
				dropDown.addOption('1', '1 Repetition');
				dropDown.addOption('2', '2 Repetitions');
				dropDown.onChange(async (value) =>	{
					this.plugin.settings.repetitions = value;
					await this.plugin.saveSettings();
				});
			});
	}
}

Could someone tell me, what I did wrong?

Thanks for the help in advance!

1 Like
2

I’ve just been putting a dropdown into one of my plugins!

It’s a one-liner to fix your one, it should look like this:

new Setting(containerEl)
  .setName('Number of repetitions')
  .setDesc('Here you can set your default number for repetition reminders')
  .setValue(this.plugin.settings.repetitions) // <-- Add me!
  .addDropdown(dropDown => {
  	dropDown.addOption('1', '1 Repetition');
  	dropDown.addOption('2', '2 Repetitions');
  	dropDown.onChange(async (value) =>	{
  		this.plugin.settings.repetitions = value;
  		await this.plugin.saveSettings();
  	});
  });

Hope that does the trick!

1 Like
3

I have the same problem, but the solution from @ollyfg does not work.

When I insert .setValue() before .addDropdown(), it says Property 'setValue' does not exist on type 'Setting'.ts(2339)

The code below also does not save the setting on reopening.

new Setting(containerEl)
	.setName('Reset the cycle duration. Currently: ' + options[this.plugin.settings.cycleDurationMinutes])
	.setDesc('The counter will not go up if your last note update was within this timeframe')
	.addDropdown((dropdown) => {
		dropdown
			.addOption("10", "Every 10 minutes")
			.addOption("1440", "Every day")
			.addOption("43800", "Every month")
			.addOption("131400", "Every 3 months")
			.addOption("525600", "Annualy")

			.setValue('Test value')

			.onChange(async (value) => {
				this.plugin.settings.cycleDurationMinutes = +value;
				await this.plugin.saveSettings();
			});
	});

It makes it blank instead when you reopen settings.

Anyone knows any solutions for this?

5

Hello! Perhaps you should try changing the location of ‘setvalue’!like:

			dropdown
			.addOptions(settingOptions)
			.setValue(this.plugin.settings.defaultStyle)
			.onChange(async (value) => {
					this.plugin.settings.defaultStyle = value;
					await this.plugin.saveSettings();
				});
			console.log(this.plugin.settings.defaultStyle)
		});

add options before setvalue :smiley_cat: