Improved memory management in the table widget client-side scripts. Minor CSS fixes.

modules/backend/assets/css/october.css

@@ -484,6 +484,8 @@ div.control-scrollpad > .scrollpad-scrollbar[data-visible]{opacity:0.7}
 div.control-scrollpad > .scrollpad-scrollbar[data-hidden]{display:none}
 div.control-scrollpad[data-direction=horizontal] > .scrollpad-scrollbar{top:auto;left:0;width:auto;height:11px}
 div.control-scrollpad[data-direction=horizontal] > .scrollpad-scrollbar .drag-handle{right:auto;top:2px;height:7px;min-height:0;min-width:10px;width:auto}
+.autocomplete.dropdown-menu{background:white}
+.autocomplete.dropdown-menu li a{padding:3px 12px}
 @font-face{font-family:'Open Sans';src:url('../font/OpenSans-Light.eot');src:url('../font/OpenSans-Light.eot?#iefix') format('embedded-opentype'),url('../font/OpenSans-Light.svg#open_sanslight') format('svg'),url('../font/OpenSans-Light.woff') format('woff'),url('../font/OpenSans-Light.ttf') format('truetype');font-style:normal;font-weight:300}
 @font-face{font-family:'Open Sans';src:url('../font/OpenSans-Regular.eot');src:url('../font/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),url('../font/OpenSans-Regular.svg#open_sansregular') format('svg'),url('../font/OpenSans-Regular.woff') format('woff'),url('../font/OpenSans-Regular.ttf') format('truetype');font-style:normal;font-weight:400}
 @font-face{font-family:'Open Sans';src:url('../font/OpenSans-Semibold.eot');src:url('../font/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),url('../font/OpenSans-Semibold.svg#open_sanssemibold') format('svg'),url('../font/OpenSans-Semibold.woff') format('woff'),url('../font/OpenSans-Semibold.ttf') format('truetype');font-style:normal;font-weight:600}

modules/backend/assets/less/controls/autocomplete.less

@@ -0,0 +1,7 @@
+.autocomplete.dropdown-menu {
+    background: white;
+
+    li a {
+        padding: 3px 12px;
+    }
+}

modules/backend/assets/less/october.less

@@ -35,6 +35,7 @@
 @import "controls/tree-path.less";
 @import "controls/namevaluelist.less";
 @import "controls/scrollpad.less";
+@import "controls/autocomplete.less";
 
 //
 // October Storm UI

modules/backend/widgets/table/assets/js/build-min.js

@@ -6,6 +6,7 @@ $.oc.table={}
 var Table=function(element,options){this.el=element
 this.$el=$(element)
 this.options=options
+this.disposed=false
 this.dataSource=null
 this.cellProcessors={}
 this.activeCellProcessor=null
@@ -24,7 +25,9 @@ if(this.options.postback&&this.options.clientDataSourceClass=='client')
 this.formSubmitHandler=this.onFormSubmit.bind(this)
 this.navigation=null
 this.recordsAddedOrDeleted=0
-this.init()}
+this.disposeBound=this.dispose.bind(this)
+this.init()
+$.oc.foundation.controlUtils.markDisposable(element)}
 Table.prototype.init=function(){this.createDataSource()
 this.initCellProcessors()
 this.navigation=new $.oc.table.helper.navigation(this)
@@ -41,6 +44,7 @@ throw new Error('The table client-side data source class "'+dataSourceClass+'" i
 this.dataSource=new $.oc.table.datasource[dataSourceClass](this)}
 Table.prototype.registerHandlers=function(){this.el.addEventListener('click',this.clickHandler)
 this.el.addEventListener('keydown',this.keydownHandler)
+this.$el.one('dispose-control',this.disposeBound)
 document.addEventListener('click',this.documentClickHandler)
 if(this.options.postback&&this.options.clientDataSourceClass=='client')
 this.$el.closest('form').bind('oc.beforeRequest',this.formSubmitHandler)
@@ -307,7 +311,10 @@ return
 if(this.activeCellProcessor&&this.activeCellProcessor.elementBelongsToProcessor(target))
 return
 this.unfocusTable()}
-Table.prototype.dispose=function(){this.unfocusTable()
+Table.prototype.dispose=function(){if(this.disposed){return}
+this.disposed=true
+this.disposeBound=true
+this.unfocusTable()
 this.dataSource.dispose()
 this.dataSource=null
 this.unregisterHandlers()

modules/backend/widgets/table/assets/js/table.js

@@ -23,6 +23,7 @@
         this.$el = $(element)
 
         this.options = options
+        this.disposed = false
 
         //
         // State properties
@@ -77,11 +78,16 @@
         // Number of records added or deleted during the session
         this.recordsAddedOrDeleted = 0
 
+        // Bound reference to dispose() - ideally the class should use the October foundation library base class
+        this.disposeBound = this.dispose.bind(this)
+
         //
         // Initialization
         //
 
         this.init()
+
+        $.oc.foundation.controlUtils.markDisposable(element)
     }
 
     // INTERNAL METHODS
@@ -136,6 +142,8 @@
     Table.prototype.registerHandlers = function() {
         this.el.addEventListener('click', this.clickHandler)
         this.el.addEventListener('keydown', this.keydownHandler)
+        this.$el.one('dispose-control', this.disposeBound)
+
         document.addEventListener('click', this.documentClickHandler)
 
         if (this.options.postback && this.options.clientDataSourceClass == 'client')
@@ -822,6 +830,16 @@
     // ============================
 
     Table.prototype.dispose = function() {
+        if (this.disposed) {
+            // Prevent errors when legacy code executes the dispose() method
+            // directly, bypassing $.oc.foundation.controlUtils.disposeControls(container)
+            return
+        }
+
+        this.disposed = true
+
+        this.disposeBound = true
+
         // Remove an editor and commit the data if needed
         this.unfocusTable()
 

modules/system/assets/ui/less/inspector.less

@@ -137,6 +137,7 @@
                     li a {
                         padding: 5px 12px;
                         white-space: normal;
+                        word-wrap: break-word;
                     }
                 }
 

modules/system/assets/ui/storm.css

@@ -2461,7 +2461,7 @@ table.table.data tr.list-tree-level-10 td.list-cell-index-1{padding-left:125px}
 .inspector-fields td.autocomplete{padding:0}
 .inspector-fields td.autocomplete .autocomplete-container input[type=text]{padding:5px 12px}
 .inspector-fields td.autocomplete .autocomplete-container ul.dropdown-menu{background:white;font-size:12px}
-.inspector-fields td.autocomplete .autocomplete-container ul.dropdown-menu li a{padding:5px 12px;white-space:normal}
+.inspector-fields td.autocomplete .autocomplete-container ul.dropdown-menu li a{padding:5px 12px;white-space:normal;word-wrap:break-word}
 .inspector-fields td.autocomplete .autocomplete-container .loading-indicator span{margin-top:-12px;right:10px;left:auto}
 .inspector-fields td.trigger-cell{padding:0 !important}
 .inspector-fields td.trigger-cell a.trigger{display:block;padding:5px 12px 7px 12px;overflow:hidden;min-height:29px;text-overflow:ellipsis;color:#333333;text-decoration:none}