Web Lab 2: autocomplete in preview file name input by bencodeorg · Pull Request #70621 · code-dot-org/code-dot-org

bencodeorg · 2026-02-03T00:43:02Z

Replaces the free text input in the Web Lab 2 preview panel with one that shows an autocompletes on user input. It re-uses and modifies an existing professional development-focused AutocompleteInput that is very generic. I moved it over to the templates directory (not exactly sure what the right place is, but felt like it shouldn't be in PD if shared).

A couple tricky cases:

Hitting enter without an option selected should update the preview with whatever is in the input box at a given time.
Hiding the dropdown when you use our "navigation" arrows to switch between pages.
Making sure the dropdown doesn't appear when files are edited.

weblab2.autocomplete.mov

Links

Jira: https://codedotorg.atlassian.net/browse/AFL-408
Slack discussion on behavior: https://codedotorg.slack.com/archives/C09EHQE4DGD/p1769795978203039

Testing story

Tested manually with Web Lab 2 (see video above).

I also tested the one use case I could see of the existing component (used in the location picker at /pd/workshop_dashboard/workshops/new/build_your_own_workshop) and saw no changes in behavior.

Follow-up work

We might want to tweak the styling here a bit (Moshe and I discussed a look where we display both the file name and path in the dropdown in the Slack thread linked above) and/or adjust behavior around whether to allow users to enter file paths that aren't valid, but thought I'd try and get the core functionality merged first.

… navigation

…mplete-preview

molly-moen

looks good to me!

molly-moen · 2026-02-03T21:19:54Z

apps/src/codebridge/utils/getFilesByLanguage.ts

@@ -0,0 +1,18 @@
+import {MultiFileSource, ProjectFile} from '@cdo/apps/lab2/types';
+
+// Returns a list of files matching the given language (by file.language or extension).


is this comment correct? It looks like we only check the language field, not the extension.

Oops good catch, I removed the extension check. Will update.

molly-moen · 2026-02-03T21:21:21Z

apps/src/templates/autocompleteInput/AutocompleteInput.tsx

    const containerRef = useOutsideClick<HTMLDivElement>(reset);

+    useEffect(() => {
+      if (!value || value.length < 3) {


why do we reset if the value's length is less than 3?

3 is the magic number that the autocomplete doesn't start giving you options until you hit. It was producing some weird behavior where options would still be visible if you deleted your input below three characters and started typing something else:

code-dot-org/apps/src/templates/autocompleteInput/AutocompleteInput.tsx

Lines 83 to 98 in 569ac10

if (debouncedValue && debouncedValue.length >= 3) {

const fetchSuggestions = async () => {

try {

setLoading(true);

const suggestedOptions = await fetchOptions(debouncedValue);

setOptions(suggestedOptions);

setActiveIndex(-1);

} catch (error) {

console.error(error);

} finally {

setLoading(false);

}

};

fetchSuggestions();

}

}, [debouncedValue, fetchOptions]);

I'll move 3 into a constant to be shared (we could also configure this via props if we wanted autocomplete to hit faster?)

Before and after video of the updated behavior in this Slack thread if you're curious.

thanks! If you could also add a comment explaining this that would be great.

It was producing some weird behavior where options would still be visible if you deleted your input below three characters and started typing something else:

Do you mind explaining what the behavior is you noticed? I see that you've implemented searching the substring within the file pathname. When I set the min length to 1 it seems to work as expected.
Did you consider looking for whether the filename begins with the substring in fetchHtmlOptions? Something like...

// Get the filename (last part after splitting by '/') const segments = option.toLowerCase().split('/'); const filename = segments[segments.length - 1]; return filename.startsWith(normalizedSearch);

The "weird behavior" thing was more about what happens if you went under 3 characters, not the number of characters that sets the limit for when we show the dropdown. If you typed more than 3 characters and cleared the input, it would retain the same set of dropdown options until your new query was 3 characters long.

Re: beginning filename/substring, I thought it was a nice feature that it would be searchable by say, folder name? Anyway, I think there are finer points like this that we can iterate on in the implementation here (a couple more in the follow-up section in the description as well).

molly-moen · 2026-02-03T21:24:24Z

apps/src/weblab2/htmlPreview/HTMLPreviewHeader.tsx

  setPreviewViewMode: (previewViewMode: PreviewViewMode) => void;
  onStopPreview: () => void;
  isStopEnabled: boolean;
+  fetchOptions: (value: string) => Promise<string[]>;


nit: this variable name isn't super clear to me. Can we name it something to do with file search or something?

Yep can do!

bethanyaconnor

Glad you could so easily reuse this component!

fisher-alice · 2026-02-04T15:30:43Z

apps/src/templates/autocompleteInput/AutocompleteInput.tsx


 import styles from './AutocompleteInput.module.scss';

+const FETCH_SUGGESTIONS_MIN_LENGTH = 3;


Curious how this value was set? And does it change the behavior of current use of AutocompleteInput in PD workshop forms where sessions are used?

Oh - I see discussion above! Still curious about 2nd part of question.

Yes, there's a video linked in the discussion above showing the behavior change in the PD form (it only has one use).

Gotcha - appreciate the check-in with teacher tools team!

fisher-alice

Just left a couple questions/suggestions. Nice work!

fisher-alice · 2026-02-04T16:08:01Z

apps/src/templates/autocompleteInput/AutocompleteInput.tsx

+      if (key === 'Enter' && onEnter && activeIndex < 0) {
+        e.preventDefault();
+        onEnter(value);
+        reset();


I'm noticing that if I don't select an option from dropdown and just press enter, the dropdown options are still displayed. This seems to happen when I press 'Enter' immediately after typing.

Screen.Recording.2026-02-04.at.10.04.59.AM.mov

Maybe add a call to blur to close dropdown and remove focus on enter?

Ooh nice catch. We already close the dropdown / remove focus on enter, but it looks like this happens only if you hit enter quickly after finishing typing because there's some logic that debounces refetching the options every 300ms, and the scheduled refetch happens after you hit enter and reopens the dropdown.

I just added a commit that gates showing options on the input being focused -- does that seem reasonable to you? ie, even if we refetch options, we won't show them because of the new gate.

I also took a look at the existing use of this component, and this problem exists there too (and is fixed with this change). So seems like an improvement overall!

NIce! thanks for the update!

oof nvm seeing a problem with that commit, working on an update...

…l onSubmit on click on option and fix

bencodeorg added 20 commits January 29, 2026 14:20

Rough autocomplete using PD component

4c361bf

Switch page on tab away, show options with fewer characters

0375df1

Move files by language to util

63ce774

Simplify, keep 3 character min

000541f

Allow submitting anything onEnter

20813ed

Working with hiding on enter

fc9833a

Hide magnifying glass icon, thinner dropdown, wider input

c74df4c

Reset AutocompleteInput

95c3571

Load page on enter

e96d430

Hide magnifying glass

dc5d9b3

Make thinner option rows configurable

61f00be

Hide options when sub 3 characters

c71bccf

Hide suggestions on history nav

b5e3754

Under 3 characters working without crash, inconsistent hiding menu on…

48c1624

… navigation

Handle navigating page history

5626904

Clean up

91c4748

Fix onEnter

709fd74

Simplify

7d29749

Merge remote-tracking branch 'origin/staging' into ben/weblab2-autoco…

a4366c2

…mplete-preview

Move autocompleteInput out of PD directory

7cdaea9

bencodeorg requested a review from a team February 3, 2026 20:56

Do not render file options on file update

569ac10

bencodeorg requested a review from bethanyaconnor February 3, 2026 21:13

molly-moen approved these changes Feb 3, 2026

View reviewed changes

Clarify min length, update comments, update variable name

7ea1530

bethanyaconnor approved these changes Feb 3, 2026

View reviewed changes

fisher-alice reviewed Feb 4, 2026

View reviewed changes

fisher-alice approved these changes Feb 4, 2026

View reviewed changes

bencodeorg added 2 commits February 4, 2026 09:22

Do not show options if not focused

5f84cb1

Allow skipping input focus on select, rename onEnter to onSubmit, cal…

cec7d0b

…l onSubmit on click on option and fix

		@@ -0,0 +1,18 @@
		import {MultiFileSource, ProjectFile} from '@cdo/apps/lab2/types';

		// Returns a list of files matching the given language (by file.language or extension).

	if (debouncedValue && debouncedValue.length >= 3) {
	const fetchSuggestions = async () => {
	try {
	setLoading(true);
	const suggestedOptions = await fetchOptions(debouncedValue);
	setOptions(suggestedOptions);
	setActiveIndex(-1);
	} catch (error) {
	console.error(error);
	} finally {
	setLoading(false);
	}
	};
	fetchSuggestions();
	}
	}, [debouncedValue, fetchOptions]);


		import styles from './AutocompleteInput.module.scss';

		const FETCH_SUGGESTIONS_MIN_LENGTH = 3;

Conversation

bencodeorg commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Links

Testing story

Follow-up work

Uh oh!

molly-moen left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bethanyaconnor left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fisher-alice Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fisher-alice left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

bencodeorg commented Feb 3, 2026 •

edited

Loading

fisher-alice Feb 4, 2026 •

edited

Loading