feat(autocomplete): allow panel to have a width value of auto #11879
Conversation
googlebot
added
the
cla: yes
src/lib/autocomplete/autocomplete.ts
Outdated
| * panel will match the width of the host. | ||
| */ | ||
| @Input() | ||
| get panelWidthAuto(): boolean { return this._panelWidthAuto; } |
There was a problem hiding this comment.
Rather than directly controlling if the panel width is auto, would it make more sense to take in a string which can be auto or any CSS sizing value? This would cover a few more use cases.
We could even have a default of something like 'match' to match the host's width.
@Input() panelWidth: string = 'match';
There was a problem hiding this comment.
IMO we should avoid having magic strings like these in APIs. We can make it so by default it matches the input width, unless the consumer passed in a truthy width.
There was a problem hiding this comment.
use a string literal if you don't want a regular string
There was a problem hiding this comment.
@crisbeto good point. Using match is a magic string. Really, I just wanted to make it a bit more flexible than a boolean would be.
| } | ||
| }); | ||
| } | ||
| } else { | ||
| // Update the panel width and direction, in case anything has changed. | ||
| this._overlayRef.updateSize({width: this._getHostWidth()}); | ||
| this._overlayRef.updateSize({width: this._getWidth()}); |
There was a problem hiding this comment.
while updateSize does any in number | string as its type for width, it ends up just coercing the value provided into {$value}px. So if auto was provided as the value it would end up as autopx.
There was a problem hiding this comment.
It only does that if the value is a number. Per https://github.com/angular/material2/blob/6.3.x/src/cdk/coercion/css-pixel-value.ts
export function coerceCssPixelValue(value: any): string {
if (value == null) {
return '';
}
return typeof value === 'string' ? value : `${value}px`;
}
There was a problem hiding this comment.
Ahh yes, I glanced too quickly when I read it.
src/lib/autocomplete/autocomplete.ts
Outdated
| * panel will match the width of the host. | ||
| */ | ||
| @Input() | ||
| get panelWidthAuto(): boolean { return this._panelWidthAuto; } |
There was a problem hiding this comment.
IMO we should avoid having magic strings like these in APIs. We can make it so by default it matches the input width, unless the consumer passed in a truthy width.
| @@ -1922,6 +1922,21 @@ describe('MatAutocomplete', () => { | |||
| expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(400); | |||
| })); | |||
|
|
|||
| it('should have panel width set to auto', () => { | |||
| const widthFixture = createComponent(SimpleAutocomplete); | |||
There was a problem hiding this comment.
It looks like the indentation on the entire function call is too much.
| @@ -579,6 +579,10 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy { | |||
| return this._formField ? this._formField.getConnectedOverlayOrigin() : this._element; | |||
| } | |||
|
|
|||
| private _getWidth(): number | string { | |||
There was a problem hiding this comment.
Rename this one to _getPanelWidth or _getOverlayWidth so it's more obvious what it does. Also consider adding a doc string.
For scenarios when the width of autocomplete panel needs to exceed the width of its input (host) in order to display the full text of each option. Fixes angular#11773
When value is supplied it will be used as a CSS value for the panel width. Otherwise, width will default to match the host. Fixes angular#11773
dgsmith2
force-pushed
the
autocomplete-width-auto
branch
from
f0a18c7 to
5049b8c
Compare
josephperrott
added
pr: lgtm
action: merge
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
For scenarios when the width of autocomplete panel needs to exceed the
width of its input (host) in order to display the full text of each
option.
Fixes #11773