fix(platform):fix for autofocusing issue in the action bar and closin…

…g of the menu once the action took. (#1572)

* fix(platform): provide an option to make action bar sticky and fixing unit test case failures

* fix(platform): revoking the action bar sticky changes as its not required implement in action bar component lib

* fix(platform): fix for autofocusing the action bar input title box while clicked on renaming. and removing the unwanted styles.

* fix(platform): clearing the timeout

* fix(platform:action bar): Fix for closing the contextual menu once the action took

libs/platform/src/lib/components/action-bar/action-bar-actions/action-bar-actions.component.html

@@ -12,7 +12,7 @@
         {{ action.label }}
     </button>
 
-    <fd-popover class="action-button-margin" placement="{{ placement }}">
+    <fd-popover [(isOpen)]="isContextualMenuOpen" class="action-button-margin" placement="{{ placement }}">
         <fd-popover-control>
             <button
                 *ngIf="menuItems?.length > 0"

libs/platform/src/lib/components/action-bar/action-bar-actions/action-bar-actions.component.scss

@@ -1,3 +0,0 @@
-.action-button-margin {
-    margin-left: 8px;
-}

libs/platform/src/lib/components/action-bar/action-bar-actions/action-bar-actions.component.ts

@@ -72,6 +72,8 @@ export class ActionBarActionsComponent implements OnInit {
     @Output()
     editing: EventEmitter<boolean> = new EventEmitter();
 
+    isContextualMenuOpen: boolean = false;
+
     constructor(private cd: ChangeDetectorRef, private menuKeyboardService: MenuKeyboardService) {}
 
     ngOnInit() {
@@ -98,6 +100,7 @@ export class ActionBarActionsComponent implements OnInit {
 
     onItemClick(item: ActionItem): void {
         this.itemClick.emit(item);
+        this.isContextualMenuOpen = false;
         this.cd.markForCheck();
     }
     onRenameClick() {

libs/platform/src/lib/components/action-bar/action-bar.component.html

@@ -27,6 +27,7 @@ <h3 class="fd-action-bar__title" *ngIf="!editing" [attr.title]="title" data-tag=
         <div fd-form-set *ngIf="editing">
             <div fd-form-item>
                 <input
+                    #inputTitle
                     fd-form-control
                     *ngIf="editing"
                     class="fd-input edit-actionbar-title"
@@ -38,7 +39,12 @@ <h3 class="fd-action-bar__title" *ngIf="!editing" [attr.title]="title" data-tag=
                 />
             </div>
         </div>
-        <p class="fd-action-bar__description" [attr.title]="description" data-tag="actionbar__description">
+        <p
+            *ngIf="description"
+            class="fd-action-bar__description"
+            [attr.title]="description"
+            data-tag="actionbar__description"
+        >
             {{ description }}
         </p>
     </div>

libs/platform/src/lib/components/action-bar/action-bar.component.scss

@@ -1,4 +0,0 @@
-.action-bar-display {
-    display: -webkit-box;
-}
-

libs/platform/src/lib/components/action-bar/action-bar.component.ts

@@ -5,7 +5,10 @@ import {
     Input,
     Output,
     EventEmitter,
-    ChangeDetectorRef
+    ChangeDetectorRef,
+    ViewChild,
+    ElementRef,
+    OnDestroy
 } from '@angular/core';
 import { Placement } from 'popper.js';
 
@@ -27,7 +30,7 @@ export interface ActionItem {
     styleUrls: ['./action-bar.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ActionBarComponent implements OnInit {
+export class ActionBarComponent implements OnInit, OnDestroy {
     /**
      * Actionbar title
      */
@@ -73,10 +76,9 @@ export class ActionBarComponent implements OnInit {
     actionItems: ActionItem[];
 
     /**
-     * option to specify the sticky action bar.
+     * View child of action bar component
      */
-    @Input()
-    sticky = false;
+    @ViewChild('inputTitle', { static: false }) private inputTitle: ElementRef;
 
     /**
      * Emitted event when "back" button is clicked.
@@ -96,13 +98,15 @@ export class ActionBarComponent implements OnInit {
      */
     @Output()
     itemClick: EventEmitter<ActionItem> = new EventEmitter<ActionItem>();
+    timer;
 
     constructor(private cd: ChangeDetectorRef) {}
 
     ngOnInit() {}
 
     enableEditTitle(editing: boolean) {
         this.editing = editing;
+        this.timer = setTimeout(() => this.inputTitle.nativeElement.focus(), 0);
         this.cd.markForCheck();
     }
 
@@ -122,4 +126,11 @@ export class ActionBarComponent implements OnInit {
             this.cd.markForCheck();
         }
     };
+
+    ngOnDestroy() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+        }
+    }
+
 }