Expose Internal Methods and Properties

[cjkoepke]

I've hit an issue where I need to programmatically control other Autocomplete instances on the same page, but (at least from my understanding) this is impossible.

Having an initiation function like this, is great:

autocomplete({
  element: document.querySelector( '' ),
  source: [ 'option', 'option-1', 'options-2']
})

But there is no way to reference this input after it initiates. How hard would it be to have this return the input instance? i.e.

const input = autocomplete({
  element: document.querySelector( '' ),
  source: [ 'option', 'option-1', 'options-2']
})

// Later
input.hide();

[NickColley]

Hello @cjkoepke,

Could you give more detail on what specific problem you're trying to solve?

[cjkoepke]

Sure! If I dynamically populate an active autocomplete input, it will start an autosuggest. Since the dynamically populated value is already accurate (not needing autosuggest), I need a way to close the popup suggestion field (or prevent it from opening ad hoc).

[timpaul]

Thanks for your suggestion @cjkoepke. We’re prioritising bug fixes over new feature development for the accessible autocomplete this quarter, so unfortunately we won’t be able to take on this work right now.

[JakeChampion]

Another good use-case I have come across for returning the component from the wrapper module:

accessible-autocomplete/src/wrapper.js

Line 4 in 935f0d4

function accessibleAutocomplete (options) {

We wanted to implement a button to clear and re-focus the input field, this currently has a sub-optimal user-experience because it requires aligning to some timers internal to accessible-autocomplete. If we reset the input and then re-focus the input before the internal timer has fired, then the input's value reverts to what it was before being reset. Those timers are there to integrate with Dragon NaturallySpeaking --

accessible-autocomplete/src/autocomplete.js

Lines 107 to 125 in 935f0d4

	// Applications like Dragon NaturallySpeaking will modify the
	// `input` field by directly changing its `.value`. These events
	// don't trigger our JavaScript event listeners, so we need to poll
	// to handle when and if they occur.
	pollInputElement () {
	this.getDirectInputChanges()
	this.$pollInput = setTimeout(() => {
	this.pollInputElement()
	}, 100)
	}
	getDirectInputChanges () {
	const inputReference = this.elementReferences[-1]
	const queryHasChanged = inputReference && inputReference.value !== this.state.query
	if (queryHasChanged) {
	this.handleInputChange({ target: { value: inputReference.value } })
	}
	}

If the component was returned, we would be able to call component.getDirectInputChanges() to update the internal state of the component and then immediately focus on the input, and have it work correctly.

This is the code we have to have right now to reset and re-focus the input:

let timeout = null;
clearButton.addEventListener('click', function clearInput() {
	input.value = '';
	clearButton.remove();
	// We need to wait longer than 100ms before focusing
	// onto the input element because accessible-autocomplete
	// only checks the value of the input every 100ms.
	// If we modify input.value and then focus into the input in less
	// than 100ms, accessible-autocomplete would not have the updated
	// value and would instead write the old value back into the input.
	// https://github.com/alphagov/accessible-autocomplete/blob/935f0d43aea1c606e6b38985e3fe7049ddbe98be/src/autocomplete.js#L107-L125
	if (!timeout) {
		// The user could press the button multiple times
		// whilst the setTimeout handler has yet to execute
		// We only want to call the handler once
		timeout = setTimeout(() => {
			input.focus();
			timeout = null;
		}, 110);
	}
});

If we had access to the component instance, we could refactor the above into:

clearButton.addEventListener('click', function clearInput() {
	input.value = '';
	clearButton.remove();
	// We need to update the internal state of accessible-autocomplete
	// with the new value in the input
	component.getDirectInputChanges();
	input.focus();
});

[walkermatt]

@JakeChampion this change to the accessibleAutocomplete function returns the component instance.