Autocomplete hardcoded element widths

[paul-request]

Problem/Feature

For some reason, autocomplete inputs and suggestion lists are hard-coded to 92%, even though the pattern library gives a .form-control 50% width.

https://github.com/hmrc/assets-frontend/blob/master/assets/scss/components/_auto-complete.scss#L45

That has knock on consequences for the clear button which is then set to a very specific 9.4% right offset.

Expected behaviour

They should be consistent with the other inputs in the pattern library

Proposed solution

2 solutions

1. Inherit the same width as .form-control
2. Set width to 100% and allow the consumer to configure the width via the parent container

Explain the steps to reproduce the bug

1. Decorate a .form-control with the autocomplete component
2. Observe that it is now 92% of the main column, whilst all other inputs are 50%.

Tell us about your environment

• Version used: 2.240.0
• Browser Name and version: All browsers
• Operating System and version (desktop or mobile): OSX desktop

[feedmypixel]

@paul-request - IMO this sounds like the best option

Set width to 100% and allow the consumer to configure the width via the parent container

Agreed the magic numbers of 92% and the 9.4% should go.
There was a reason for this and I believe it was beyond pixel pushing, please liaise with @automaticdreams as autoComplete is used on her services at the moment and she will be the person who has visibility on the why and if those why's are relevant?

FYI you can also see an implementation of autoComplete on the Component Library