Unable to select text of author's name on edition page after author "button" accidentally clicked

[tfmorris]

Problem

While creating #13617, I discovered that it's possible to get the page into a state where it's impossible to select the text associated with the author's name in the link.

Reproducing the bug

1. Go to https://openlibrary.org/books/OL60300732M
2. (Accidentally) click blue dot next to author's name
3. Attempt to select text of edition title and author's name
4. Click "Clear selections" on omni bar
5. Attempt to select text again

• Expected behavior: Edition title and author's name gets selected together as a single string of text
• Actual behavior: author's name is silently skipped in both cases, even after the little magic button is deselected

Context

• Browser (Chrome, Safari, Firefox, etc): Chrome
• OS (Windows, Mac, etc): Mac
• Logged in (Y/N): Y
• Environment (prod, dev, local): prod

Breakdown

Implementation Details (for maintainers)

Requirements Checklist

• [ ]

Related files

Stakeholders

• @lokesh

---

Instructions for Contributors

• Please run these commands to ensure your repository is up to date before creating a new branch to work on this issue and each time after pushing code to Github, because the pre-commit bot may add commits to your PRs upstream.

[openlibrary-bot]

Thank you @tfmorris for submitting this issue!

Context

This is the Integrated Librarian Environment (ILE) selection tool. The "little magic button" is the blue-dot .ile-select-handle prepended to author links (added only when addHandle: true):

openlibrary/openlibrary/plugins/openlibrary/js/ile/utils/SelectionManager/SelectionManager.js

Lines 448 to 460 in 3002233

	* This selection provider makes author names on the books page selectable.
	*/
	{
	path: /(\/works\/OL\d+W.*|\/books\/OL\d+M.*)/,
	selector: 'a[href^="/authors/OL"]',
	addHandle: true,
	type: ['author'],
	/**
	* @param {HTMLAnchorElement} el
	* @return {import('../ol.js').AuthorOLID}
	**/
	data: el => el.href.match(/OL\d+A/)[0],
	},

Clicking it calls toggleSelected, which (via setElementSelectionAttributes) sets el.draggable = true on the enclosing <a> so the link becomes drag-and-droppable while selected:

openlibrary/openlibrary/plugins/openlibrary/js/ile/utils/SelectionManager/SelectionManager.js

Lines 175 to 185 in 3002233

	setElementSelectionAttributes(el, selected) {
	el.classList.toggle('ile-selected', selected);
	el.draggable = selected;
	if (selected) {
	el.addEventListener('dragstart', this.dragStart);
	el.addEventListener('dragend', this.dragEnd);
	} else {
	el.removeEventListener('dragstart', this.dragStart);
	el.removeEventListener('dragend', this.dragEnd);
	}
	}

Setting draggable=true makes the browser start a native drag operation on mousedown+drag over that element instead of a text-selection drag — which is why the author name gets "silently skipped" while selected.

The part that matches this report's second symptom ("even after the little magic button is deselected") looks like a genuine bug: IntegratedLibrarianEnvironment.reset() — called by "Clear Selections" — only strips the ile-selected CSS class, but never calls setElementSelectionAttributes(el, false), so draggable (and the bound dragstart/dragend listeners) are never reset to false:

openlibrary/openlibrary/plugins/openlibrary/js/ile/index.js

Lines 57 to 65 in 3002233

	reset() {
	for (const elem of $('.ile-selected')) {
	elem.classList.remove('ile-selected');
	}
	this.setStatusText('');
	this.$selectionActions.empty();
	this.$statusImages.empty();
	this.$actions.empty();
	}

Compare with toggleSelected, which correctly pairs the class change with setElementSelectionAttributes:

openlibrary/openlibrary/plugins/openlibrary/js/ile/utils/SelectionManager/SelectionManager.js

Lines 156 to 173 in 3002233

	toggleSelected(el, forceSelected) {
	const isCurSelected = el.classList.contains('ile-selected');
	const provider = this.getProvider(el);
	const olid = provider.data(el);
	const img_src = this.getType(olid)?.image(olid);
	if (isCurSelected === forceSelected) return;
	this.setElementSelectionAttributes(el, !isCurSelected);
	if (isCurSelected) {
	this.removeSelectedItem(olid);
	const img_el = $('#ile-drag-status .images img').toArray().find(el => el.src === img_src);
	$(img_el).remove();
	} else {
	this.addSelectedItem(olid);
	this.ile.$statusImages.append(`<li><img title="${olid}" src="${img_src}"/></li>`);
	}
	}

This selectability logic (and the "don't intercept a click if it's ending a text-selection drag" guard) was introduced by a78d3b1 ("Don't select on link clicks", 2023-05-15), and the underlying feature/file is otherwise unowned in recent history — git log/git blame on SelectionManager.js show most activity from Drini Cami (@cdrini), Mark Heiman, and Jim Champ. No duplicate or related open issue/PR was found searching issues/PRs for this behavior.

---

Issue Assessment

Open questions

• Should reset() restore draggable/listener state for every element it strips ile-selected from (matching what setElementSelectionAttributes(el, false) does), or should selection state instead be centralized so the class and the drag attributes can never drift out of sync?
• Independent of the "stuck after clear" bug: is it acceptable UX for the author link to become undraggable-as-text while actively selected (a tradeoff for enabling drag-and-drop), or should the drag affordance live only on the .ile-select-handle dot rather than the whole <a>?

Action items

• A maintainer should confirm whether the fix should live in IntegratedLibrarianEnvironment.reset() (call setElementSelectionAttributes(el, false) per element instead of only removing the class) or in SelectionManager.clearSelectedItems()/toggleSelected itself.

---

Suggested breakdown

• Update reset() (openlibrary/plugins/openlibrary/js/ile/index.js) to reset draggable and remove the dragstart/dragend listeners for every .ile-selected element it clears, not just the CSS class — likely by routing through SelectionManager.setElementSelectionAttributes(el, false).
• Add/extend a test in tests/unit/js/SelectionManager.test.js asserting draggable is false and drag listeners are unbound after clearSelectedItems()/reset().
• (Design/UX call, not code) Decide whether the drag affordance should be scoped to .ile-select-handle instead of the whole link, so text selection isn't affected even while an item is actively selected.

The first two sub-tasks are small and localized to one file; could be a Good First Issue once a lead confirms the intended fix approach in the first action item above.

🔔 Stakeholders

@cdrini — ILE toolbar is your area, and git blame/git log on SelectionManager.js show you as the original author of the selection/click-handling logic this bug lives in.

Full triage checklist

• Triage — correct labels applied or removed
• Problem / opportunity — problem is clear, audience identified, actionable
• Scope — issue is well-scoped; does not try to do too many things
• Justification — reasoning and impact stated; sufficient for leads to prioritize
• Success & testing criteria — defines what "done" looks like, verifiable by a contributor
• Proposal & breakdown — concrete plan present; checklist actionable for a contributor
• If bug: environment & repro steps — browser, version, local vs prod; steps to reproduce
• Risks, concerns, open questions — identified and surfaced
• Richy context — relevant code, commits, PRs reviewed; no duplicate found
• References — screenshots, designs, docs, and links present where needed

---

Note

This comment was automatically generated by Richy, Open Library's issue enrichment assistant, on behalf of @mekarpeles. This is NOT a sign-off. This issue needs lead review before work begins.