x4js 1.5.5 → 1.5.6

package/lib/changelog.txt

@@ -1,3 +1,11 @@
+2022/12/08 : 1.5.6 --------------------------------------------------------
+	combobox.ts - allow editable
+	              items can be a function
+				  populate removed
+
+	listview.ts - focus bug on popuplistview
+	label.ts    - bug: display dangerous html elements when multiline = true
+
 2022/12/05 : 1.5.1 --------------------------------------------------------
 	icon.ts - now accepts direct <svg>..</svg> in argument (var or other)
 

package/lib/cjs/combobox.js

@@ -47,9 +47,36 @@ const tools_1 = require("./tools");
 class ComboBox extends layout_1.HLayout {
     constructor(props) {
         super(props);
-        this.setDomEvent('keypress', () => this.showPopup());
-        this.setDomEvent('click', () => this.showPopup());
+        if (!props.editable) {
+            this.setDomEvent('keypress', () => this.showPopup());
+        }
+        this.setDomEvent('click', () => {
+            if (this.m_props.editable) {
+                this.m_ui_input.focus();
+            }
+            this.showPopup();
+        });
+        this.setDomEvent("keydown", e => this._onKey(e));
         this.mapPropEvents(props, 'selectionChange');
+        this.m_popvis = false;
+        this.m_lockpop = false;
+        this.m_lockchg = false;
+    }
+    _onKey(e) {
+        if (this.m_popvis) {
+            if (e.key == "ArrowUp" || e.key == "ArrowDown") {
+                this.m_lockpop = true;
+                this.m_popup.handleKey(e);
+                this.m_lockpop = false;
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            else if (e.key == "Escape") {
+                this._hidePopup();
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }
     }
     set items(items) {
         this.m_props.items = items;
@@ -61,16 +88,35 @@ class ComboBox extends layout_1.HLayout {
     render(props) {
         var _a;
         if (!props.renderer) {
-            this.m_ui_input = new input_1.Input({
+            const input = new input_1.Input({
                 flex: 1,
-                readOnly: true,
+                readOnly: this.m_props.editable ? false : true,
                 tabIndex: 0,
                 name: props.name,
                 value_hook: {
                     get: () => { return this.value; },
                     set: (v) => { this.value = v; }
+                },
+                dom_events: {
+                    focus: () => {
+                        if (this.m_props.editable && input.value.length == 0) {
+                            this.showPopup();
+                        }
+                    },
+                    input: () => {
+                        if (this.m_lockchg) {
+                            return;
+                        }
+                        const text = input.value;
+                        this.m_selection = { id: undefined, text };
+                        let items = this.showPopup();
+                        if (items && items.length && items[0].text == text) {
+                            this.m_selection = { id: items[0].id, text };
+                        }
+                    }
                 }
             });
+            this.m_ui_input = input;
         }
         else {
             this.m_ui_input = new component_1.Component({
@@ -104,7 +150,9 @@ class ComboBox extends layout_1.HLayout {
                         cls: 'gadget',
                         icon: 'var( --x4-icon-angle-down )',
                         tabIndex: false,
-                        click: () => this.showPopup(),
+                        click: () => {
+                            this.showPopup(false);
+                        },
                         dom_events: {
                             focus: () => { this.dom.focus(); },
                         }
@@ -125,10 +173,18 @@ class ComboBox extends layout_1.HLayout {
     /**
      * display the popup
      */
-    showPopup() {
+    showPopup(filter_items = true) {
         let props = this.m_props;
         if (props.readOnly || this.hasClass("@disable")) {
-            return;
+            return null;
+        }
+        let items = props.items;
+        if ((0, tools_1.isFunction)(items)) {
+            const filter = filter_items ? this.m_ui_input.value : null;
+            items = items(filter);
+        }
+        if (items.length == 0) {
+            return null;
         }
         // need creation ?
         if (!this.m_popup) {
@@ -138,10 +194,15 @@ class ComboBox extends layout_1.HLayout {
             // prepare the combo listview
             this.m_popup = new listview_1.PopupListView({
                 cls: '@combo-popup',
-                items: props.items,
                 populate: props.populate,
                 renderItem: this.m_props.renderer,
-                selectionChange: (e) => this._selectItem(e),
+                selectionChange: (e) => {
+                    this._selectItem(e);
+                    if (!this.m_lockpop) {
+                        this._hidePopup();
+                        this.focus();
+                    }
+                },
                 cancel: (e) => this.signal('cancel', e),
                 style: {
                     fontFamily,
@@ -149,14 +210,18 @@ class ComboBox extends layout_1.HLayout {
                 }
             });
         }
+        this.m_popup.items = items;
         let r1 = this.m_ui_button.getBoundingRect(), r2 = this.m_ui_input.getBoundingRect();
         this.m_popup.setStyle({
             minWidth: r1.right - r2.left,
         });
         this.m_popup.displayAt(r2.left, r2.bottom);
+        this.m_popvis = true;
+        this.startTimer("focus-check", 100, true, () => this._checkFocus());
         if (this.value !== undefined) {
             this.m_popup.selection = this.value;
         }
+        return items;
     }
     /** @ignore
       */
@@ -165,15 +230,17 @@ class ComboBox extends layout_1.HLayout {
         if (!item) {
             return;
         }
+        this.m_lockchg = true;
         this._setInput(item, true);
+        this.m_lockchg = false;
         this.m_selection = {
             id: item.id,
             text: item.text
         };
         this.emit('selectionChange', (0, x4events_1.EvSelectionChange)(item));
         this.emit('change', (0, x4events_1.EvChange)(item.id));
-        this.m_ui_input.focus();
-        this.m_popup.hide();
+        //this.m_ui_input.focus( );
+        //this.m_popup.hide( );
     }
     /**
      *
@@ -209,7 +276,13 @@ class ComboBox extends layout_1.HLayout {
         return this.m_selection ? this.m_selection.id : undefined;
     }
     get valueText() {
-        return this.m_selection ? this.m_selection.text : undefined;
+        if (this.m_selection) {
+            return this.m_selection.text;
+        }
+        if (this.m_props.editable) {
+            return this.m_ui_input.value;
+        }
+        return '';
     }
     /**
      *
@@ -217,7 +290,7 @@ class ComboBox extends layout_1.HLayout {
     set value(id) {
         let items = this.m_props.items;
         if ((0, tools_1.isFunction)(items)) {
-            items = items();
+            items = items(null);
         }
         const found = items.some((v) => {
             if (v.id === id) {
@@ -234,6 +307,23 @@ class ComboBox extends layout_1.HLayout {
     get input() {
         return this.m_ui_input instanceof input_1.Input ? this.m_ui_input : null;
     }
+    _checkFocus() {
+        const focus = document.activeElement;
+        if (this.dom && this.dom.contains(focus) || focus == document.body) {
+            return;
+        }
+        if (this.m_popup && this.m_popup.dom && this.m_popup.dom.contains(focus)) {
+            return;
+        }
+        this._hidePopup();
+    }
+    _hidePopup() {
+        if (this.m_popvis) {
+            this.m_popup.close();
+            this.m_popvis = false;
+            this.stopTimer("focus-check");
+        }
+    }
     static storeProxy(props) {
         let view = props.store instanceof datastore_1.DataStore ? props.store.createView() : props.store;
         return () => {
@@ -247,13 +337,13 @@ class ComboBox extends layout_1.HLayout {
             return result;
         };
     }
+    focus() {
+        if (this.m_props.editable) {
+            this.m_ui_input.focus();
+        }
+        else {
+            super.focus();
+        }
+    }
 }
 exports.ComboBox = ComboBox;
-/*
- export type CBComboBoxRenderer = ( rec: Record ) => string;
-export interface ComboBoxStore {
-    store: DataStore;
-    display: string | CBComboBoxRenderer;		// if string, the field name to display
-}
-
-*/

package/lib/cjs/label.js

@@ -49,7 +49,7 @@ class Label extends component_1.Component {
         var _a;
         let text = this.m_props.text;
         if (this.m_props.multiline && !(text instanceof tools_1.HtmlString)) {
-            text = new tools_1.HtmlString(text.replace(/\n/g, '<br/>'));
+            text = new tools_1.HtmlString((0, tools_1.escapeHtml)(text, true));
         }
         if (!props.icon) {
             this.setContent(text);
@@ -74,7 +74,7 @@ class Label extends component_1.Component {
             props.text = txt;
             let text = this.m_props.text;
             if (this.m_props.multiline && !(text instanceof tools_1.HtmlString)) {
-                text = new tools_1.HtmlString(text.replace('/\n/g', '<br/>'));
+                text = new tools_1.HtmlString((0, tools_1.escapeHtml)(text, true));
             }
             if (this.dom) {
                 let comp = this;

package/lib/cjs/listview.js

@@ -64,7 +64,7 @@ class ListView extends layout_1.VLayout {
             this._buildItems();
         }
         else if (this.m_props.populate) {
-            this.items = this.m_props.populate();
+            this.items = this.m_props.populate(null);
         }
     }
     render(props) {
@@ -316,6 +316,8 @@ class ListView extends layout_1.VLayout {
     }
     /** @ignore */
     _handleClick(e) {
+        e.stopImmediatePropagation();
+        e.preventDefault();
         let dom = e.target, self = this.dom, list_items = this.m_props.items; // already created by build
         // go up until we find something interesting
         while (dom && dom != self) {

package/lib/cjs/messagebox.js

@@ -27,6 +27,15 @@
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PromptDialogBox = exports.MessageBox = void 0;
 const dialog_1 = require("./dialog");
@@ -79,6 +88,24 @@ class MessageBox extends dialog_1.Dialog {
         msg.show();
         return msg;
     }
+    static showAsync(props) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                let _props;
+                const cb = (btn) => {
+                    resolve(btn);
+                };
+                if ((0, tools_1.isString)(props) || (0, tools_1.isHtmlString)(props)) {
+                    _props = { message: props, click: cb };
+                }
+                else {
+                    _props = Object.assign(Object.assign({}, props), { click: cb });
+                }
+                const msg = new MessageBox(_props);
+                msg.show();
+            });
+        });
+    }
     /**
      * display an alert message
      */

package/lib/cjs/tools.js

@@ -273,7 +273,7 @@ exports.sprintf = sprintf;
  */
 function escapeHtml(unsafe, nl_br = false) {
     if (!unsafe || unsafe.length == 0) {
-        return unsafe;
+        return "";
     }
     let result = unsafe.replace(/[<>\&\"\']/g, function (c) {
         return '&#' + c.charCodeAt(0) + ';';

package/lib/cjs/version.js

@@ -29,4 +29,4 @@
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.x4js_version = void 0;
-exports.x4js_version = "1.5.5";
+exports.x4js_version = "1.5.6";

package/lib/esm/combobox.js

@@ -45,13 +45,42 @@ export class ComboBox extends HLayout {
     m_ui_input;
     m_ui_button;
     m_popup;
+    m_lockpop;
+    m_lockchg;
+    m_popvis;
     m_selection;
-    m_defer_sel;
     constructor(props) {
         super(props);
-        this.setDomEvent('keypress', () => this.showPopup());
-        this.setDomEvent('click', () => this.showPopup());
+        if (!props.editable) {
+            this.setDomEvent('keypress', () => this.showPopup());
+        }
+        this.setDomEvent('click', () => {
+            if (this.m_props.editable) {
+                this.m_ui_input.focus();
+            }
+            this.showPopup();
+        });
+        this.setDomEvent("keydown", e => this._onKey(e));
         this.mapPropEvents(props, 'selectionChange');
+        this.m_popvis = false;
+        this.m_lockpop = false;
+        this.m_lockchg = false;
+    }
+    _onKey(e) {
+        if (this.m_popvis) {
+            if (e.key == "ArrowUp" || e.key == "ArrowDown") {
+                this.m_lockpop = true;
+                this.m_popup.handleKey(e);
+                this.m_lockpop = false;
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            else if (e.key == "Escape") {
+                this._hidePopup();
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }
     }
     set items(items) {
         this.m_props.items = items;
@@ -62,16 +91,35 @@ export class ComboBox extends HLayout {
     /** @ignore */
     render(props) {
         if (!props.renderer) {
-            this.m_ui_input = new Input({
+            const input = new Input({
                 flex: 1,
-                readOnly: true,
+                readOnly: this.m_props.editable ? false : true,
                 tabIndex: 0,
                 name: props.name,
                 value_hook: {
                     get: () => { return this.value; },
                     set: (v) => { this.value = v; }
+                },
+                dom_events: {
+                    focus: () => {
+                        if (this.m_props.editable && input.value.length == 0) {
+                            this.showPopup();
+                        }
+                    },
+                    input: () => {
+                        if (this.m_lockchg) {
+                            return;
+                        }
+                        const text = input.value;
+                        this.m_selection = { id: undefined, text };
+                        let items = this.showPopup();
+                        if (items && items.length && items[0].text == text) {
+                            this.m_selection = { id: items[0].id, text };
+                        }
+                    }
                 }
             });
+            this.m_ui_input = input;
         }
         else {
             this.m_ui_input = new Component({
@@ -105,7 +153,9 @@ export class ComboBox extends HLayout {
                         cls: 'gadget',
                         icon: 'var( --x4-icon-angle-down )',
                         tabIndex: false,
-                        click: () => this.showPopup(),
+                        click: () => {
+                            this.showPopup(false);
+                        },
                         dom_events: {
                             focus: () => { this.dom.focus(); },
                         }
@@ -126,10 +176,18 @@ export class ComboBox extends HLayout {
     /**
      * display the popup
      */
-    showPopup() {
+    showPopup(filter_items = true) {
         let props = this.m_props;
         if (props.readOnly || this.hasClass("@disable")) {
-            return;
+            return null;
+        }
+        let items = props.items;
+        if (isFunction(items)) {
+            const filter = filter_items ? this.m_ui_input.value : null;
+            items = items(filter);
+        }
+        if (items.length == 0) {
+            return null;
         }
         // need creation ?
         if (!this.m_popup) {
@@ -139,10 +197,15 @@ export class ComboBox extends HLayout {
             // prepare the combo listview
             this.m_popup = new PopupListView({
                 cls: '@combo-popup',
-                items: props.items,
                 populate: props.populate,
                 renderItem: this.m_props.renderer,
-                selectionChange: (e) => this._selectItem(e),
+                selectionChange: (e) => {
+                    this._selectItem(e);
+                    if (!this.m_lockpop) {
+                        this._hidePopup();
+                        this.focus();
+                    }
+                },
                 cancel: (e) => this.signal('cancel', e),
                 style: {
                     fontFamily,
@@ -150,14 +213,18 @@ export class ComboBox extends HLayout {
                 }
             });
         }
+        this.m_popup.items = items;
         let r1 = this.m_ui_button.getBoundingRect(), r2 = this.m_ui_input.getBoundingRect();
         this.m_popup.setStyle({
             minWidth: r1.right - r2.left,
         });
         this.m_popup.displayAt(r2.left, r2.bottom);
+        this.m_popvis = true;
+        this.startTimer("focus-check", 100, true, () => this._checkFocus());
         if (this.value !== undefined) {
             this.m_popup.selection = this.value;
         }
+        return items;
     }
     /** @ignore
       */
@@ -166,15 +233,17 @@ export class ComboBox extends HLayout {
         if (!item) {
             return;
         }
+        this.m_lockchg = true;
         this._setInput(item, true);
+        this.m_lockchg = false;
         this.m_selection = {
             id: item.id,
             text: item.text
         };
         this.emit('selectionChange', EvSelectionChange(item));
         this.emit('change', EvChange(item.id));
-        this.m_ui_input.focus();
-        this.m_popup.hide();
+        //this.m_ui_input.focus( );
+        //this.m_popup.hide( );
     }
     /**
      *
@@ -210,7 +279,13 @@ export class ComboBox extends HLayout {
         return this.m_selection ? this.m_selection.id : undefined;
     }
     get valueText() {
-        return this.m_selection ? this.m_selection.text : undefined;
+        if (this.m_selection) {
+            return this.m_selection.text;
+        }
+        if (this.m_props.editable) {
+            return this.m_ui_input.value;
+        }
+        return '';
     }
     /**
      *
@@ -218,7 +293,7 @@ export class ComboBox extends HLayout {
     set value(id) {
         let items = this.m_props.items;
         if (isFunction(items)) {
-            items = items();
+            items = items(null);
         }
         const found = items.some((v) => {
             if (v.id === id) {
@@ -235,6 +310,23 @@ export class ComboBox extends HLayout {
     get input() {
         return this.m_ui_input instanceof Input ? this.m_ui_input : null;
     }
+    _checkFocus() {
+        const focus = document.activeElement;
+        if (this.dom && this.dom.contains(focus) || focus == document.body) {
+            return;
+        }
+        if (this.m_popup && this.m_popup.dom && this.m_popup.dom.contains(focus)) {
+            return;
+        }
+        this._hidePopup();
+    }
+    _hidePopup() {
+        if (this.m_popvis) {
+            this.m_popup.close();
+            this.m_popvis = false;
+            this.stopTimer("focus-check");
+        }
+    }
     static storeProxy(props) {
         let view = props.store instanceof DataStore ? props.store.createView() : props.store;
         return () => {
@@ -248,12 +340,12 @@ export class ComboBox extends HLayout {
             return result;
         };
     }
+    focus() {
+        if (this.m_props.editable) {
+            this.m_ui_input.focus();
+        }
+        else {
+            super.focus();
+        }
+    }
 }
-/*
- export type CBComboBoxRenderer = ( rec: Record ) => string;
-export interface ComboBoxStore {
-    store: DataStore;
-    display: string | CBComboBoxRenderer;		// if string, the field name to display
-}
-
-*/

package/lib/esm/label.js

@@ -27,7 +27,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 import { Component } from './component';
-import { HtmlString } from './tools';
+import { escapeHtml, HtmlString } from './tools';
 import { Icon } from './icon';
 /**
  * Standard label
@@ -45,7 +45,7 @@ export class Label extends Component {
     render(props) {
         let text = this.m_props.text;
         if (this.m_props.multiline && !(text instanceof HtmlString)) {
-            text = new HtmlString(text.replace(/\n/g, '<br/>'));
+            text = new HtmlString(escapeHtml(text, true));
         }
         if (!props.icon) {
             this.setContent(text);
@@ -70,7 +70,7 @@ export class Label extends Component {
             props.text = txt;
             let text = this.m_props.text;
             if (this.m_props.multiline && !(text instanceof HtmlString)) {
-                text = new HtmlString(text.replace('/\n/g', '<br/>'));
+                text = new HtmlString(escapeHtml(text, true));
             }
             if (this.dom) {
                 let comp = this;

package/lib/esm/listview.js

@@ -59,7 +59,7 @@ export class ListView extends VLayout {
             this._buildItems();
         }
         else if (this.m_props.populate) {
-            this.items = this.m_props.populate();
+            this.items = this.m_props.populate(null);
         }
     }
     render(props) {
@@ -307,6 +307,8 @@ export class ListView extends VLayout {
     }
     /** @ignore */
     _handleClick(e) {
+        e.stopImmediatePropagation();
+        e.preventDefault();
         let dom = e.target, self = this.dom, list_items = this.m_props.items; // already created by build
         // go up until we find something interesting
         while (dom && dom != self) {

package/lib/esm/messagebox.js

@@ -76,6 +76,22 @@ export class MessageBox extends Dialog {
         msg.show();
         return msg;
     }
+    static async showAsync(props) {
+        return new Promise((resolve, reject) => {
+            let _props;
+            const cb = (btn) => {
+                resolve(btn);
+            };
+            if (isString(props) || isHtmlString(props)) {
+                _props = { message: props, click: cb };
+            }
+            else {
+                _props = { ...props, click: cb };
+            }
+            const msg = new MessageBox(_props);
+            msg.show();
+        });
+    }
     /**
      * display an alert message
      */

package/lib/esm/tools.js

@@ -269,7 +269,7 @@ export function sprintf(format, ...args) {
  */
 export function escapeHtml(unsafe, nl_br = false) {
     if (!unsafe || unsafe.length == 0) {
-        return unsafe;
+        return "";
     }
     let result = unsafe.replace(/[<>\&\"\']/g, function (c) {
         return '&#' + c.charCodeAt(0) + ';';

package/lib/esm/version.js

@@ -26,4 +26,4 @@
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
-export const x4js_version = "1.5.5";
+export const x4js_version = "1.5.6";

package/lib/src/combobox.ts

@@ -38,7 +38,7 @@ import { Input } from './input'
 import { Label } from './label'
 import { Button } from './button'
 import { HLayout } from './layout'
-import { PopupListView, ListViewItem, PopulateItems, EvCancel } from './listview';
+import { PopupListView, ListViewItem, EvCancel, PopulateItems } from './listview';
 import { DataStore, DataView, Record } from './datastore'
 import { isFunction, HtmlString } from './tools'
 
@@ -73,12 +73,12 @@ export interface ComboBoxProps extends CProps<ComboBoxEventMap> {
 
 	labelAlign?: 'left' | 'right';	
 
-	items?: ListViewItem[];
-	populate?: PopulateItems; // if not specified, fire 'populate' event
+	items?: ListViewItem[] | PopulateItems;
 	value?: any; // shown value at init
 
 	renderer?: ComboItemRender;
 	selectionChange?: EventCallback<EvSelectionChange>;// shortcut to events: { selectionChange: ... }
+	editable?: boolean;
 }
 
 /**
@@ -87,43 +87,97 @@ export interface ComboBoxProps extends CProps<ComboBoxEventMap> {
 
 export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 	
-	private m_ui_input: Component;
+	private m_ui_input: Input | Component;
 	private m_ui_button: Button;
 	private m_popup: PopupListView;
-
+	private m_lockpop: boolean;
+	private m_lockchg: boolean;
+	private m_popvis: boolean;
 	private m_selection: ListViewItem;
-	private m_defer_sel: any;
-	
+		
 	constructor(props: ComboBoxProps) {
 		super(props);
 
-		this.setDomEvent( 'keypress', () => this.showPopup() );
-		this.setDomEvent( 'click', () => this.showPopup() );
+		if( !props.editable ) {
+			this.setDomEvent( 'keypress', () => this.showPopup() );
+		}
+
+		this.setDomEvent( 'click', () => {
+			if( this.m_props.editable ) {
+				this.m_ui_input.focus( );
+			}
+			
+			this.showPopup();
+		} );
 
+		this.setDomEvent("keydown", e => this._onKey(e));
 		this.mapPropEvents(props, 'selectionChange' );
+		
+		this.m_popvis = false;
+		this.m_lockpop = false;
+		this.m_lockchg = false;
 	}
 
+	_onKey(e) {
+        if (this.m_popvis) {
+            if (e.key == "ArrowUp" || e.key == "ArrowDown") {
+				this.m_lockpop = true;
+                this.m_popup.handleKey(e);
+                this.m_lockpop = false;
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            else if (e.key == "Escape") {
+                this._hidePopup();
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }
+    }
+
 	set items( items: ListViewItem[] ) {
 		this.m_props.items = items;
 		if( this.m_popup ) {
 			this.m_popup.items = items;
 		}
 	}
-
+	
 	/** @ignore */	
 	render( props: ComboBoxProps ) {
 
 		if( !props.renderer ) {
-			this.m_ui_input = new Input( {
+			
+			const input = new Input( {
 				flex 	: 1,
-				readOnly : true,
+				readOnly : this.m_props.editable ? false : true,
 				tabIndex : 0,
 				name: props.name,
 				value_hook: {
 					get: (): string => { return this.value; },
 					set: (v: string) => { this.value = v; }
+				},
+				dom_events: {
+					focus: () => {
+						if( this.m_props.editable && input.value.length==0 ) {
+							this.showPopup( );
+						}
+					},
+					input: ( ) => {
+						if( this.m_lockchg ) {
+							return;
+						}
+
+						const text = input.value;
+						this.m_selection = { id: undefined, text };
+						let items = this.showPopup( );
+						if( items && items.length && items[0].text==text ) {
+							this.m_selection = { id: items[0].id, text };
+						}
+					}
 				}
 			});
+
+			this.m_ui_input = input;
 		}
 		else {
 			this.m_ui_input = new Component( { 
@@ -162,7 +216,9 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 						cls: 'gadget',
 						icon: 'var( --x4-icon-angle-down )',
 						tabIndex: false,
-						click: () => this.showPopup(),
+						click: () => {
+							this.showPopup( false )
+						},
 						dom_events: {
 							focus: () => { this.dom.focus(); },
 						}
@@ -188,11 +244,21 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 	 * display the popup 
 	 */
 
-	showPopup() {
+	showPopup( filter_items: boolean = true ) {
 
 		let props = this.m_props;
 		if (props.readOnly || this.hasClass("@disable") ) {
-			return;
+			return null;
+		}
+
+		let items = props.items;
+		if( isFunction( items ) ) {
+			const filter = filter_items ? (this.m_ui_input as Input).value : null;
+			items = items( filter );
+		}
+		
+		if( items.length==0 ) {
+			return null;
 		}
 
 		// need creation ?
@@ -205,10 +271,17 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 			// prepare the combo listview
 			this.m_popup = new PopupListView({
 				cls: '@combo-popup',
-				items: props.items,
 				populate: props.populate,
 				renderItem: this.m_props.renderer,
-				selectionChange: (e) => this._selectItem(e),
+				selectionChange: (e) => {
+
+					this._selectItem(e);
+					
+					if (!this.m_lockpop) {
+                        this._hidePopup();
+                        this.focus();
+                    }
+				},
 				cancel: ( e ) => this.signal( 'cancel', e ),
 				style: {
 					fontFamily,
@@ -216,6 +289,8 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 				}
 			});
 		}
+
+		this.m_popup.items = items;
 	
 		let r1 = this.m_ui_button.getBoundingRect(),
 			r2 = this.m_ui_input.getBoundingRect();
@@ -225,10 +300,14 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 		});
 
 		this.m_popup.displayAt(r2.left, r2.bottom);
+		this.m_popvis = true;
+		this.startTimer("focus-check", 100, true, () => this._checkFocus());
 
 		if( this.value!==undefined ) {
 			this.m_popup.selection = this.value;
 		}
+
+		return items;
 	}
 
 	/** @ignore
@@ -241,8 +320,10 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 			return;
 		}
 
+		this.m_lockchg = true;
 		this._setInput( item, true );
-
+		this.m_lockchg = false;
+					
 		this.m_selection = {
 			id: 	item.id,
 			text: 	item.text
@@ -250,9 +331,8 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 
 		this.emit( 'selectionChange', EvSelectionChange( item ) );
 		this.emit( 'change', EvChange(item.id) );
-		this.m_ui_input.focus( );
-
-		this.m_popup.hide( );
+		//this.m_ui_input.focus( );
+		//this.m_popup.hide( );
 	}
 
 	/**
@@ -294,7 +374,15 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 	}
 
 	public get valueText( ) {
-		return this.m_selection ? this.m_selection.text : undefined;
+		if( this.m_selection ) {
+			return this.m_selection.text;
+		}
+
+		if( this.m_props.editable ) {
+			return (this.m_ui_input as Input).value;
+		}
+
+		return '';
 	}
 
 	/**
@@ -305,9 +393,9 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 		let items = this.m_props.items;
 
 		if( isFunction(items) ) {
-			items = items( );
+			items = items( null );
 		}
-
+		
 		const found = items.some( (v) => {
 			if (v.id === id) {
 				this._setInput( v );
@@ -326,6 +414,27 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 		return this.m_ui_input instanceof Input ? this.m_ui_input : null;
 	}
 
+	_checkFocus() {
+        const focus = document.activeElement;
+        if (this.dom && this.dom.contains(focus) || focus==document.body ) {
+            return;
+        }
+
+        if (this.m_popup && this.m_popup.dom && this.m_popup.dom.contains(focus)) {
+            return;
+        }
+
+        this._hidePopup();
+    }
+
+	_hidePopup() {
+        if (this.m_popvis) {
+            this.m_popup.close();
+            this.m_popvis = false;
+			this.stopTimer("focus-check");
+        }
+    }
+	
 	static storeProxy( props: ComboStoreProxyProps ): PopulateItems { 
 
 		let view: DataView = props.store instanceof DataStore ? props.store.createView() : props.store;
@@ -343,20 +452,14 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 			return result;
 		};
 	} 
-}
 
-
-
-/*
- export type CBComboBoxRenderer = ( rec: Record ) => string;
-export interface ComboBoxStore {
-	store: DataStore;
-	display: string | CBComboBoxRenderer;		// if string, the field name to display
+	focus( ) {
+		if( this.m_props.editable ) {
+			this.m_ui_input.focus( );
+		}
+		else {
+			super.focus( );
+		}
+	}
 }
 
-*/
-
-
-
-
-

package/lib/src/label.ts

@@ -28,7 +28,7 @@
 **/
 
 import { Component, CProps } from './component'
-import { HtmlString } from './tools'
+import { escapeHtml, HtmlString } from './tools'
 import { Icon, IconID } from './icon'
 
 // ============================================================================
@@ -69,7 +69,7 @@ export class Label extends Component<LabelProps>
 
 		let text: any = this.m_props.text;
 		if( this.m_props.multiline && !(text instanceof HtmlString) ) {
-			text = new HtmlString( (text as string).replace( /\n/g, '<br/>' ) );
+			text = new HtmlString( escapeHtml(text,true) );
 		}
 
 		if( !props.icon ) {
@@ -102,7 +102,7 @@ export class Label extends Component<LabelProps>
 
 			let text: any = this.m_props.text;
 			if( this.m_props.multiline && !(text instanceof HtmlString) ) {
-				text = new HtmlString( (text as string).replace( '/\n/g', '<br/>' ) );
+				text = new HtmlString(escapeHtml(text,true) );
 			}
 
 			if( this.dom ) {

package/lib/src/listview.ts

@@ -62,7 +62,7 @@ export interface RenderListItem {
  * callback to fill the list
  */
 export interface PopulateItems {
-	(): ListViewItem[];
+	( filter: string ): ListViewItem[];
 }
 
 /**
@@ -137,7 +137,7 @@ export class ListView extends VLayout<ListViewProps,ListViewEventMap> {
 			this._buildItems();
 		}
 		else if( this.m_props.populate ) {
-			this.items = this.m_props.populate( );
+			this.items = this.m_props.populate( null );
 		}
 	}
 
@@ -449,6 +449,9 @@ export class ListView extends VLayout<ListViewProps,ListViewEventMap> {
 	/** @ignore */
 	private _handleClick(e: MouseEvent) {
 
+		e.stopImmediatePropagation();
+		e.preventDefault( );
+		
 		let dom = e.target as HTMLElement,
 			self = this.dom,
 			list_items = this.m_props.items as ListViewItem[];	// already created by build

package/lib/src/messagebox.ts

@@ -105,6 +105,27 @@ export class MessageBox extends Dialog<MessageBoxProps>
 		return msg;
 	}
 
+	static async showAsync( props: string | HtmlString | MessageBoxProps): Promise<string> {
+		return new Promise( (resolve, reject ) => {
+			
+			let _props: MessageBoxProps;
+
+			const cb = ( btn: string ) => {
+				resolve( btn );
+			}
+
+			if (isString(props) || isHtmlString(props)) {
+				_props = { message: props, click: cb };
+			}
+			else {
+				_props = { ...props, click: cb };
+			}
+
+			const msg = new MessageBox(_props);
+			msg.show();
+		});
+	}
+
 	/**
 	 * display an alert message
 	 */

package/lib/src/tools.ts

@@ -346,7 +346,7 @@ export function sprintf(format: string, ...args) {
  */
 export function escapeHtml(unsafe: string, nl_br = false): string {
 	if (!unsafe || unsafe.length == 0) {
-		return unsafe;
+		return "";
 	}
 
 	let result = unsafe.replace(/[<>\&\"\']/g, function (c) {

package/lib/src/version.ts

@@ -27,4 +27,4 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-export const x4js_version = "1.5.5";
+export const x4js_version = "1.5.6";

package/lib/types/combobox.d.ts

@@ -33,7 +33,7 @@ import { Component, CProps, ContainerEventMap } from './component';
 import { EvChange, EvSelectionChange, EventCallback } from './x4events';
 import { Input } from './input';
 import { HLayout } from './layout';
-import { ListViewItem, PopulateItems, EvCancel } from './listview';
+import { ListViewItem, EvCancel, PopulateItems } from './listview';
 import { DataStore, DataView, Record } from './datastore';
 import { HtmlString } from './tools';
 export interface ComboStoreProxyProps {
@@ -55,11 +55,11 @@ export interface ComboBoxProps extends CProps<ComboBoxEventMap> {
     label?: string;
     labelWidth?: number;
     labelAlign?: 'left' | 'right';
-    items?: ListViewItem[];
-    populate?: PopulateItems;
+    items?: ListViewItem[] | PopulateItems;
     value?: any;
     renderer?: ComboItemRender;
     selectionChange?: EventCallback<EvSelectionChange>;
+    editable?: boolean;
 }
 /**
  * @review use textedit
@@ -68,9 +68,12 @@ export declare class ComboBox extends HLayout<ComboBoxProps, ComboBoxEventMap> {
     private m_ui_input;
     private m_ui_button;
     private m_popup;
+    private m_lockpop;
+    private m_lockchg;
+    private m_popvis;
     private m_selection;
-    private m_defer_sel;
     constructor(props: ComboBoxProps);
+    _onKey(e: any): void;
     set items(items: ListViewItem[]);
     /** @ignore */
     render(props: ComboBoxProps): void;
@@ -78,7 +81,7 @@ export declare class ComboBox extends HLayout<ComboBoxProps, ComboBoxEventMap> {
     /**
      * display the popup
      */
-    showPopup(): void;
+    showPopup(filter_items?: boolean): ListViewItem[];
     /** @ignore
       */
     private _selectItem;
@@ -96,6 +99,9 @@ export declare class ComboBox extends HLayout<ComboBoxProps, ComboBoxEventMap> {
      */
     set value(id: any);
     get input(): Input;
+    _checkFocus(): void;
+    _hidePopup(): void;
     static storeProxy(props: ComboStoreProxyProps): PopulateItems;
+    focus(): void;
 }
 export {};

package/lib/types/listview.d.ts

@@ -52,7 +52,7 @@ export interface RenderListItem {
  * callback to fill the list
  */
 export interface PopulateItems {
-    (): ListViewItem[];
+    (filter: string): ListViewItem[];
 }
 /**
  * listview can generate these events

package/lib/types/messagebox.d.ts

@@ -46,6 +46,7 @@ export declare class MessageBox extends Dialog<MessageBoxProps> {
      * display a messagebox
      */
     static show(props: string | HtmlString | MessageBoxProps): MessageBox;
+    static showAsync(props: string | HtmlString | MessageBoxProps): Promise<string>;
     /**
      * display an alert message
      */

package/lib/types/version.d.ts

@@ -26,4 +26,4 @@
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
-export declare const x4js_version = "1.5.5";
+export declare const x4js_version = "1.5.6";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x4js",
-	"version": "1.5.5",
+	"version": "1.5.6",
 	"description": "X4js core files",
 	"main": "lib/cjs/index.js",
 	"types": "lib/types/index.d.ts",