I am adding a settings panel to my plugin and I am trying to implement this file selector dropdown so that the user can specify which folder new files are to saved in.
Here is an example from another plugin Book Search.
I want to implement exactly that but I haven’t been able to figure out how… yet.
Please help if you can.
Claude 3.5 Sonnet was able to figure this out for me after I shared the Obsidian API with it. I asked it to write a reply to my own question, in case this is useful to someone else in the future.
The dropdown folder selector can be implemented using Obsidian’s AbstractInputSuggest
class. Here’s a minimal example:
class FolderSuggest extends AbstractInputSuggest<string> {
private folders: string[];
constructor(app: App, inputEl: HTMLInputElement) {
super(app, inputEl);
// Get all folders and include root folder
this.folders = ["/"].concat(this.app.vault.getAllFolders().map(folder => folder.path));
}
getSuggestions(inputStr: string): string[] {
const inputLower = inputStr.toLowerCase();
return this.folders.filter(folder =>
folder.toLowerCase().includes(inputLower)
);
}
renderSuggestion(folder: string, el: HTMLElement): void {
el.createEl("div", { text: folder });
}
selectSuggestion(folder: string): void {
this.inputEl.value = folder;
const event = new Event('input');
this.inputEl.dispatchEvent(event);
this.close();
}
}
// Usage in the settings tab:
new Setting(containerEl)
.setName('Folder location')
.setDesc('Choose a folder.')
.addSearch(search => {
search
.setPlaceholder('Example: folder1/folder2')
.setValue(this.plugin.settings.folderLocation)
.onChange(async (value) => {
this.plugin.settings.folderLocation = value;
await this.plugin.saveSettings();
});
// Add folder suggestions
new FolderSuggest(this.app, search.inputEl);
});
This creates a searchable dropdown that:
-
- Shows all vault folders when clicked
-
- Filters folders as you type
-
- Updates the input value when a folder is selected
-
- Maintains the standard Obsidian UI look and feel
The key is extending AbstractInputSuggest and implementing its required methods. The suggestions appear automatically when the input is focused or when typing.