Merge pull request #2333 from Akshat55/datepicker-options

fix(datepicker): Allow 'altInput' flatpickr option to be set to true

Author: Akshat55

src/datepicker/datepicker.component.ts

@@ -21,7 +21,6 @@ import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
 import flatpickr from "flatpickr";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { carbonFlatpickrMonthSelectPlugin } from "./carbon-flatpickr-month-select";
-import { Subscription } from "rxjs";
 import * as languages from "flatpickr/dist/l10n/index";
 import { DatePickerInput } from "carbon-components-angular/datepicker-input";
 import { ElementService } from "carbon-components-angular/utils";
@@ -284,11 +283,8 @@ export class DatePicker implements
 
 	protected flatpickrInstance = null;
 
-	protected visibilitySubscription = new Subscription();
-
 	constructor(
 		protected elementRef: ElementRef,
-		protected elementService: ElementService,
 		protected i18n: I18n
 	) { }
 
@@ -321,17 +317,6 @@ export class DatePicker implements
 	}
 
 	ngAfterViewInit() {
-		this.visibilitySubscription = this.elementService
-			.visibility(this.elementRef.nativeElement, this.elementRef.nativeElement)
-			.subscribe(value => {
-				if (this.isFlatpickrLoaded() && this.flatpickrInstance.isOpen) {
-					this.flatpickrInstance._positionCalendar(this.elementRef.nativeElement.querySelector(`#${this.id}-input`));
-					if (!value.visible) {
-						this.flatpickrInstance.close();
-					}
-				}
-			});
-
 		setTimeout(() => {
 			this.addInputListeners();
 		}, 0);
@@ -425,7 +410,6 @@ export class DatePicker implements
 	ngOnDestroy() {
 		if (!this.isFlatpickrLoaded()) { return; }
 		this.flatpickrInstance.destroy();
-		this.visibilitySubscription.unsubscribe();
 	}
 
 	/**

src/modal/modal.component.ts

@@ -9,8 +9,12 @@ import {
 	ElementRef,
 	ViewChild,
 	SimpleChanges,
-	OnChanges
+	OnChanges,
+	Renderer2,
+	Inject,
+	OnDestroy
 } from "@angular/core";
+import { DOCUMENT } from "@angular/common";
 import { cycleTabs, getFocusElementList } from "carbon-components-angular/common";
 
 /**
@@ -101,15 +105,7 @@ export class ModalDemo {
 		</ibm-overlay>
 	`
 })
-export class Modal implements AfterViewInit, OnChanges {
-	/**
-	 * Size of the modal to display.
-	 */
-	@Input() size: "xs" | "sm" | "lg";
-	/**
-	 * Classification of the modal.
-	 */
-	@Input() theme: "default" | "danger" = "default";
+export class Modal implements AfterViewInit, OnChanges, OnDestroy {
 
 	/**
 	 * Label for the modal.
@@ -124,6 +120,33 @@ export class Modal implements AfterViewInit, OnChanges {
 		return this.ariaLabel;
 	}
 
+	/**
+	 * This detects whether or not the modal contains scrolling content.
+	 *
+	 * To force trigger a detection (ie. on window resize), change or reset the value of the modal content.
+	 *
+	 * Use the `hasScrollingContent` input to manually override the overflow indicator.
+	 */
+	get shouldShowScrollbar() {
+		const modalContent = this.modal ? this.modal.nativeElement.querySelector(".bx--modal-content") : null;
+		if (!modalContent) {
+			return false;
+		}
+
+		// get rounded value from height to match integer returned from scrollHeight
+		const modalContentHeight = Math.ceil(modalContent.getBoundingClientRect().height);
+		const modalContentScrollHeight = modalContent.scrollHeight;
+		return modalContentScrollHeight > modalContentHeight;
+	}
+	/**
+	 * Size of the modal to display.
+	 */
+	@Input() size: "xs" | "sm" | "lg";
+	/**
+	 * Classification of the modal.
+	 */
+	@Input() theme: "default" | "danger" = "default";
+
 	@Input() ariaLabel = "default";
 
 	/**
@@ -166,14 +189,23 @@ export class Modal implements AfterViewInit, OnChanges {
 	/**
 	 * Creates an instance of `Modal`.
 	 */
-	constructor(public modalService: ModalService) {}
+	constructor(
+		public modalService: ModalService,
+		@Inject(DOCUMENT) private document: Document,
+		private renderer: Renderer2
+	) { }
 
 	ngOnChanges({ open }: SimpleChanges) {
 		if (open) {
 			if (open.currentValue) {
 				// `100` is just enough time to allow the modal
 				// to become visible, so that we can set focus
 				setTimeout(() => this.focusInitialElement(), 100);
+				// Prevent scrolling on open
+				this.renderer.addClass(this.document.body, "bx--body--with-modal-open");
+			} else if (!open.currentValue) {
+				// Enable scrolling on close
+				this.renderer.removeClass(this.document.body, "bx--body--with-modal-open");
 			} else if (this.trigger) {
 				this.trigger.focus();
 			}
@@ -207,23 +239,9 @@ export class Modal implements AfterViewInit, OnChanges {
 		}
 	}
 
-	/**
-	 * This detects whether or not the modal contains scrolling content.
-	 *
-	 * To force trigger a detection (ie. on window resize), change or reset the value of the modal content.
-	 *
-	 * Use the `hasScrollingContent` input to manually override the overflow indicator.
-	 */
-	get shouldShowScrollbar() {
-		const modalContent = this.modal ? this.modal.nativeElement.querySelector(".bx--modal-content") : null;
-		if (modalContent) {
-			// get rounded value from height to match integer returned from scrollHeight
-			const modalContentHeight = Math.ceil(modalContent.getBoundingClientRect().height);
-			const modalContentScrollHeight = modalContent.scrollHeight;
-			return modalContentScrollHeight > modalContentHeight;
-		} else {
-			return false;
-		}
+	// Remove class preventing scrolling
+	ngOnDestroy() {
+		this.renderer.removeClass(this.document.body, "bx--body--with-modal-open");
 	}
 
 	protected focusInitialElement() {