Develop

packages/oui-datagrid/src/datagrid.html

@@ -65,6 +65,7 @@
                                 column="column"
                                 index="rowIndex">
                             </oui-datagrid-cell>
+                            <oui-skeleton ng-if="row && row.$promise && !$ctrl.hasProperty(row, column.name)"></oui-skeleton>
                         </td>
                         <td ng-if="$ctrl.hasActionMenu || $ctrl.customizable"
                             class="oui-datagrid__cell oui-datagrid__cell-sticky">

packages/oui-datagrid/src/index.spec.js

@@ -115,7 +115,7 @@ describe("ouiDatagrid", () => {
                 expect(getCell($firstRow, 2).children().html()).toBe(additionnalDataValue);
             }));
 
-            it("should keep undefined when a cell is not loaded", inject(($q) => {
+            it("should display a skeleton when a cell is not loaded", inject(($q) => {
                 const deferred = $q.defer();
                 const loadRowSpy = jasmine.createSpy("loadRow");
 
@@ -138,7 +138,7 @@ describe("ouiDatagrid", () => {
                 expect(loadRowSpy.calls.count()).toEqual(1);
 
                 expect(getCell($firstRow, 0).children().html()).toBe(fakeData[0].firstName);
-                expect(getCell($firstRow, 2).children().html()).toBeUndefined();
+                expect(getCell($firstRow, 2).children()[0].tagName.toLowerCase()).toBe("oui-skeleton");
             }));
 
             it("should load data later and display it", inject(($q) => {
@@ -557,7 +557,7 @@ describe("ouiDatagrid", () => {
                 expect(getCell($fifthRow, 1).children().html()).toBe(fakeData[4].lastName);
             });
 
-            it("should keep undefined when a cell is not loaded", inject(($q) => {
+            it("should display a skeleton when a cell is not loaded", inject(($q) => {
                 const deferred = $q.defer();
                 const loadRowSpy = jasmine.createSpy("loadRow");
 
@@ -590,7 +590,7 @@ describe("ouiDatagrid", () => {
                 expect(loadRowSpy.calls.count()).toEqual(1);
 
                 expect(getCell($firstRow, 0).children().html()).toBe(fakeData[0].firstName);
-                expect(getCell($firstRow, 2).children().html()).toBeUndefined();
+                expect(getCell($firstRow, 2).children()[0].tagName.toLowerCase()).toBe("oui-skeleton");
             }));
 
             it("should load data later and display it", inject(($q) => {

packages/oui-dropdown/src/dropdown.controller.js

@@ -145,12 +145,7 @@ export default class {
         this.popperElement.style.minWidth = `${this.getTriggerWidth()}px`;
 
         this.popper = new Popper(this.triggerElement, this.popperElement, {
-            placement,
-            modifiers: {
-                preventOverflow: {
-                    boundariesElement: this.$document[0].body
-                }
-            }
+            placement
         });
     }
 

packages/oui-field/src/field.controller.js

@@ -90,8 +90,8 @@ export default class FieldController {
             });
 
             // Handle click on label to set focus on form element.
-            this.label = angular.element(this.$element[0].querySelector(LABEL_SELECTOR));
-            this.label.on("click", () => {
+            this.labelElement = angular.element(this.$element[0].querySelector(LABEL_SELECTOR));
+            this.labelElement.on("click", () => {
                 this.$scope.$broadcast("oui:focus");
             });
 
@@ -106,7 +106,7 @@ export default class FieldController {
         });
     }
 
-    $destroy () {
+    $onDestroy () {
         Object.keys(this.controls).forEach(name => {
             const namedControls = this.controls[name];
             namedControls.forEach(control => {
@@ -115,8 +115,8 @@ export default class FieldController {
             });
         });
 
-        if (this.label) {
-            this.label.off("click");
+        if (this.labelElement) {
+            this.labelElement.off("click");
         }
     }
 

packages/oui-popover/src/popover.controller.js

@@ -35,7 +35,7 @@ export default class PopoverController {
         this.setTrigger();
     }
 
-    $destroy () {
+    $onDestroy () {
         this.closePopover();
     }
 

packages/oui-select-picker/src/select-picker.controller.js

@@ -27,7 +27,7 @@ export default class SelectPickerController {
         }
 
         if (this.picture) {
-            this.isImgPath = /^data:/.test(this.picture) || /\.(gif|png|jpg)$/.test(this.picture);
+            this.isImgPath = /^data:/.test(this.picture) || /\.(gif|png|jpg|svg)$/.test(this.picture);
         }
 
         if (this.values) {
@@ -68,8 +68,10 @@ export default class SelectPickerController {
         });
     }
 
-    $destroy () {
-        this.labelElement.off("click");
+    $onDestroy () {
+        if (this.labelElement) {
+            this.labelElement.off("click");
+        }
     }
 
     getFirstValueMatch (path) {

packages/oui-select/src/select.controller.js

@@ -46,7 +46,7 @@ export default class {
         this.unregisterFocus = this.$scope.$on("oui:focus", () => this.$select.setFocus());
     }
 
-    $destroy () {
+    $onDestroy () {
         if (this.unregisterFocus) {
             this.unregisterFocus();
         }

packages/oui-slideshow/src/slideshow.controller.js

@@ -62,7 +62,7 @@ export default class {
         });
     }
 
-    $destroy () {
+    $onDestroy () {
         this.closeOnBoarding();
     }
 

packages/oui-textarea/src/textarea.controller.js

@@ -54,8 +54,10 @@ export default class {
         }
     }
 
-    $destroy () {
-        this.$footer.off("click");
+    $onDestroy () {
+        if (this.$footer) {
+            this.$footer.off("click");
+        }
     }
 
     onTextareaChange () {