Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Using templates and defaultValue results in an empty option on focus #424

Open
ediblecode opened this issue Feb 27, 2020 · 7 comments · May be fixed by #425
Open

Using templates and defaultValue results in an empty option on focus #424

ediblecode opened this issue Feb 27, 2020 · 7 comments · May be fixed by #425
Labels
🐛 bug Something isn't working the way it should (including incorrect wording in documentation)

Comments

@ediblecode
Copy link

Using the 'templates' option in tandem with 'defaultValue' results in an empty (or undefined) suggestion when you've give focus to the input.

I've created a codepen to show the scenario and detailed repro steps are below.

In this example, the suggestion is 'undefined':

image

because I'm returning undefined from the suggestion function, but if you return empty string then you still get an 'empty' suggestion:

image.

This is somewhat related to #240 (I think), in that my issue is only manifesting itself, because of the behavior from #240.

Repro steps

  1. Set the defaultValue property
  2. Set the templates.inputValue to a function
  3. Set the templates.suggestion to a function
  4. Click on the input to give it focus

Expected result

Nothing happens

Actual result

A sugestion of undefined appears

Suggested fix

I think this is because inside autocomplete.js the initial options state doesn't use the isQueryAnOption function, which in turn uses templateInputValue. So line 65 could be:

-options: props.defaultValue ? [props.defaultValue] : [],
+options: this.isQueryAnOption(props.defaultValue, [props.defaultValue]) ? [props.defaultValue] : [],

OR we change the options.map call within the render, to only render options where the result of this.templateSuggestion(option) is not falsey.

I think the second option is better, but would appreciate any comments!
@ediblecode ediblecode changed the title Using templates and defaultValue results in empty options Using templates and defaultValue results in an empty option on focus Feb 27, 2020
@ediblecode ediblecode linked a pull request Feb 27, 2020 that will close this issue
Open
@kellylee-gds kellylee-gds added awaiting triage Needs triaging by team and removed awaiting triage Needs triaging by team labels Mar 9, 2020
danielnaab added a commit to 18F/cv_faq that referenced this issue Jun 4, 2020
@danielnaab
Remove pre-filling of search terms in input box.
aaf4e96 
See: alphagov/accessible-autocomplete#424
@Nate-Wessel
Copy link

I'm having a similar problem. In my case, it seems that the issue is caused by the defaultValue expecting a string, while my template functions expect an arbitrary object. Passing an object with the expected structure as the defaultValue results in Uncaught (in promise) TypeError: O.toLowerCase is not a function. Passing a string results in undefined errors when I try to access properties that don't exist.

@archferns archferns mentioned this issue Apr 30, 2021
Merged
@edwardhorsford
Copy link
Contributor

Have also come across this - similarly my template functions expect an object.

My hacky solution is for my template functions to test if the've been given an object - if not, they just render return whatever they were given.

@edwardhorsford
Copy link
Contributor

Have realised my above solution isn't ideal where the template to display is something other than a string.

For our schools search, we return results like this:
Screenshot 2021-11-12 at 13 04 06

Because of this bug, this ends up as:
Screenshot 2021-11-12 at 13 04 33

If I have my suggestion template check if result is a string and just render that, it looks like:
Screenshot 2021-11-12 at 13 05 30

This isn't terrible but is also not showing what it's meant to show. Will see if I can hack around something showing.

It seems there's two issues:

@edwardhorsford
Copy link
Contributor

I slightly feel that if the Autocomplete gets null, undefined or false returned from the suggestion template, then it should disregard that option - rather than rendering Undefined as a valid option.

@edwardhorsford
Copy link
Contributor

I have another (hacky) solution - avoid sending defaultValue entirely.

Instead, after the autocomplete is initialised, use your own javascript to set the value of the input directly. When focused, the autocomplete treats this as a search with a query so runs the regular source function and everything works.

@edwardhorsford edwardhorsford mentioned this issue Nov 12, 2021
Open
@ryantk
Copy link

ryantk commented Nov 29, 2021

I have another (hacky) solution - avoid sending defaultValue entirely.

Instead, after the autocomplete is initialised, use your own javascript to set the value of the input directly. When focused, the autocomplete treats this as a search with a query so runs the regular source function and everything works.

@edwardhorsford When I do this the autocomplete suggestions list automatically appears on page load (albeit only showing the first option) but I would like it to not appear at all.

Have you got any suggestions to work around this?

@vanitabarrett vanitabarrett added the 🐛 bug Something isn't working the way it should (including incorrect wording in documentation) label Jan 6, 2022
@edwardhorsford edwardhorsford mentioned this issue Jan 28, 2022
Merged
@jennikate
Copy link

When I do this the autocomplete suggestions list automatically appears on page load (albeit only showing the first option) but I would like it to not appear at all.

We've been having the same issue with the defaultValues.
We're now setting the value of the input directly with our own javascript and then updating the classes on the ul element to ensure the hidden class is used.

It's a very hacky workaround but it does at least work.

ivanELEC added a commit to ministryofjustice/laa-submit-crime-forms that referenced this issue Aug 8, 2023
@ivanELEC
Fix issue with value not saving
9c2ec7a 
Also added workaround for known bug of accessible-autocomplete (alphagov/accessible-autocomplete#424) where using templates shows "undefined" on first click/focus

Need to fix contrast issues on highlight
@ivanELEC ivanELEC mentioned this issue Aug 8, 2023
Merged
3 tasks
ivanELEC added a commit to ministryofjustice/laa-submit-crime-forms that referenced this issue Aug 11, 2023
@ivanELEC
Crm457 326 offence list (#212)
3ca4807 
## Description of change

- Added offence type to Offence
- Used a template for main offence suggestion autocomplete to include
offence type as well as description

## Link to relevant ticket
[Update main offence
list](https://dsdmoj.atlassian.net/browse/CRM457-326)

## Notes for reviewer
The `clearUndefinedSuggestions()` function is a pretty awkward and not
very good workaround for a [bug in the accessible-autocomplete
](alphagov/accessible-autocomplete#424) - as
it stands

## Screenshots of changes (if applicable)

### Before changes:

![image](https://github.com/ministryofjustice/laa-claim-non-standard-magistrate-fee-backend/assets/26544538/9ef44898-07d8-4040-bdc2-f0e216cd2b96)

### After changes:

![image](https://github.com/ministryofjustice/laa-claim-non-standard-magistrate-fee-backend/assets/26544538/940cc112-8c0c-48e7-a279-f6acc3857472)


## TO DO 

- [x] Change on hover/selected styling of text in accessible
autocomplete's list items to be white instead of grey to fix contrast
issues
- [x] Add tests for JS code
- [x] Error handling where necessary (this may include figuring out a
different way of doing the autocomplete bug workaround as it isnt
airtight by any means)
lookupdaily added a commit to DFE-Digital/find-information-about-academies-and-trusts that referenced this issue Sep 7, 2023
@lookupdaily
Add default value to autocomplete input
dbc7a4c 
Adding the accessible autocomplete element meant that when completing a text search from the home page (non-js route) the input value is no longer populated when the search page is loaded. We have added a default value on init autocomplete.

There is a known issue with autocomplete (alphagov/accessible-autocomplete#424), that setting a default value results in a suggestion with the text 'undefined'. This is bedause the default value is treated as a selected item, even though it is likely to be a partial search term, and is a string instead of an Aucomplete empty object. The workaround for this is to check if the result is a string when setting the custom template.
lookupdaily added a commit to DFE-Digital/find-information-about-academies-and-trusts that referenced this issue Sep 8, 2023
@lookupdaily
Add default value to autocomplete input
abba43b 
Adding the accessible autocomplete element meant that when completing a text search from the home page (non-js route) the input value is no longer populated when the search page is loaded. We have added a default value on init autocomplete.

There is a known issue with autocomplete (alphagov/accessible-autocomplete#424), that setting a default value results in a suggestion with the text 'undefined'. This is bedause the default value is treated as a selected item, even though it is likely to be a partial search term, and is a string instead of an Aucomplete empty object. The workaround for this is to check if the result is a string when setting the custom template.
lookupdaily added a commit to DFE-Digital/find-information-about-academies-and-trusts that referenced this issue Sep 11, 2023
@lookupdaily
Add default value to autocomplete input
e7108e3 
Adding the accessible autocomplete element meant that when completing a text search from the home page (non-js route) the input value is no longer populated when the search page is loaded. We have added a default value on init autocomplete.

There is a known issue with autocomplete (alphagov/accessible-autocomplete#424), that setting a default value results in a suggestion with the text 'undefined'. This is bedause the default value is treated as a selected item, even though it is likely to be a partial search term, and is a string instead of an Aucomplete empty object. The workaround for this is to check if the result is a string when setting the custom template.
@defong defong mentioned this issue Nov 15, 2023
Merged
4 tasks
@JamieCleare2525 JamieCleare2525 mentioned this issue Jan 31, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 bug Something isn't working the way it should (including incorrect wording in documentation)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix custom templates issue with defaultValue ediblecode/accessible-autocomplete
7 participants
@jennikate @ediblecode @ryantk @edwardhorsford @Nate-Wessel @vanitabarrett @kellylee-gds