Skip to content

Commit 74583b9

Browse files
matskommalerba
authored andcommitted
fix(tooltip): render style values in ngOnInit instead of the constructor (#15468)
Due to changes in Angular it's not logical to change style values directly within a constructor. This should be done instead within the ngOnInit lifecycle hook. This patch changes this behavior for the `ToolTip` component.
1 parent 22be0d8 commit 74583b9

File tree

1 file changed

+26
-1
lines changed

1 file changed

+26
-1
lines changed

src/lib/tooltip/tooltip.ts

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import {
3636
InjectionToken,
3737
Input,
3838
NgZone,
39+
OnInit,
3940
OnDestroy,
4041
Optional,
4142
ViewContainerRef,
@@ -115,7 +116,7 @@ export function MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY(): MatTooltipDefaultOptions
115116
'(touchend)': '_handleTouchend()',
116117
},
117118
})
118-
export class MatTooltip implements OnDestroy {
119+
export class MatTooltip implements OnDestroy, OnInit {
119120
_overlayRef: OverlayRef | null;
120121
_tooltipInstance: TooltipComponent | null;
121122

@@ -256,6 +257,30 @@ export class MatTooltip implements OnDestroy {
256257
});
257258
}
258259

260+
/**
261+
* Setup styling-specific things
262+
*/
263+
ngOnInit() {
264+
const element = this._elementRef.nativeElement;
265+
const elementStyle = element.style as CSSStyleDeclaration & {webkitUserDrag: string};
266+
267+
if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
268+
// When we bind a gesture event on an element (in this case `longpress`), HammerJS
269+
// will add some inline styles by default, including `user-select: none`. This is
270+
// problematic on iOS and in Safari, because it will prevent users from typing in inputs.
271+
// Since `user-select: none` is not needed for the `longpress` event and can cause unexpected
272+
// behavior for text fields, we always clear the `user-select` to avoid such issues.
273+
elementStyle.webkitUserSelect = elementStyle.userSelect = elementStyle.msUserSelect = '';
274+
}
275+
276+
// Hammer applies `-webkit-user-drag: none` on all elements by default,
277+
// which breaks the native drag&drop. If the consumer explicitly made
278+
// the element draggable, clear the `-webkit-user-drag`.
279+
if (element.draggable && elementStyle.webkitUserDrag === 'none') {
280+
elementStyle.webkitUserDrag = '';
281+
}
282+
}
283+
259284
/**
260285
* Dispose the tooltip when destroyed.
261286
*/

0 commit comments

Comments
 (0)