diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index f39740863f3..0ef17ac685a 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -4666,11 +4666,17 @@ instance.web.form.FieldBinaryImage = instance.web.form.FieldBinary.extend({
 
 instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
     template: "FieldStatus",
-    clickable: false,
     start: function() {
         this._super();
         this.selected_value = null;
-        this.clickable = !!this.node.attrs.clickable;
+        // backward compatibility
+        this.options.clickable = this.options.clickable || (this.node.attrs || {}).clickable || false;
+        this.options.visible = this.options.visible || (this.node.attrs || {}).statusbar_visible || false;
+        this.loaded = new $.Deferred();
+        if (this.options.clickable) {
+            this.$element.on('click','li',this.on_click_stage);
+        }
+        // TODO move the following into css :after
         if (this.$element.parent().is('header')) {
             this.$element.after('<div class="oe_clear"/>');
         }
@@ -4688,121 +4694,73 @@ instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
         }
         // trick to be sure all values are loaded in the form, therefore
         // enabling the evaluation of dynamic domains
+        self.selection = [];
         $.async_when().then(function() {
-            return self.render_list();
+            self.get_selection();
         });
+        return this.loaded;
     },
-    /** Get the status list and render them
-     *  to_show: [[identifier, value_to_display]] where
-     *   - identifier = key for a selection, id for a many2one
-     *   - display_val = label that will be displayed
-     *   - ex: [[0, "New"]] (many2one) or [["new", "In Progress"]] (selection)
-     */
-    render_list: function() {
-        var self = this;
-        // get selection values, filter them and render them
-        var selection_done = 
-        this.get_selection().pipe(self.proxy('filter_selection')).pipe(self.proxy('render_elements'));
-    },
-
-    /** Get the selection list to be displayed in the statusbar widget.
+    /** Get the selection and render it
+     *  selection: [[identifier, value_to_display], ...]
      *  For selection fields: this is directly given by this.field.selection
-     *  For many2one fields :
-     *  - perform a search on the relation of the many2one field (given by
-     *    field.relation )
-     *  - get the field domain for the search
-     *    - self.build_domain() gives the domain given by the view or by
-     *      the field
-     *    - if the optional statusbar_fold attribute is set to true, make
-     *      an AND with build_domain to hide all 'fold=true' columns
-     *    - make an OR with current value, to be sure it is displayed,
-     *      with the correct order, even if it is folded
+     *  For many2one fields:  perform a search on the relation of the many2one field
      */
     get_selection: function() {
         var self = this;
         if (this.field.type == "many2one") {
-            this.selection = [];
-            // get fold information from widget
-            var fold = ((this.node.attrs || {}).statusbar_fold || true);
-            // build final domain: if fold option required, add the
-            if (fold == true) {
-                var domain = new instance.web.CompoundDomain(['|'], ['&'], self.build_domain(), [['fold', '=', false]], [['id', '=', self.selected_value]]);
-            } else {
-                var domain = new instance.web.CompoundDomain(['|'], self.build_domain(), [['id', '=', self.selected_value]]);
+            var domain = new instance.web.CompoundDomain(['|'], self.build_domain(), [['id', '=', self.selected_value]]);
+            var ds = new instance.web.DataSetSearch(this, this.field.relation, self.build_context(), domain);
+            ds.read_slice(['name'], {}).done( function (records) {
+                for(var i = 0; i < records.length; i++) {
+                    self.selection.push([records[i].id, records[i].name]);
+                }
+                self.render_elements();
+                self.loaded.resolve();
+            });
+        } else {
+            this.loaded.resolve();
+            // For field type selection filter values according to
+            // statusbar_visible attribute of the field. For example:
+            // statusbar_visible="draft,open".
+            var selection = this.field.selection;
+            console.log(selection);
+            for(var i=0; i< selection.length; i++) {
+                var key = selection[i][0];
+                if(key == this.selected_value || !this.options.visible || this.options.visible.indexOf(key) != -1) {
+                    this.selection.push(selection[i]);
+                }
             }
-            // get a DataSetSearch on the current field relation (ex: crm.lead.stage_id -> crm.case.stage)
-            var model_ext = new instance.web.DataSetSearch(this, this.field.relation, self.build_context(), domain);
-            // fetch selection
-            var read_defer = model_ext.read_slice(['name'], {}).pipe( function (records) {
-                _(records).each(function (record) {
-                    self.selection.push([record.id, record.name]);
-                });
-            });
-        } else {
-            this.selection = this.field.selection;
-            var read_defer = new $.Deferred().resolve();
-        }
-        return read_defer;
-    },
-
-    /** Filters this.selection, according to values coming from the statusbar_visible
-     *  attribute of the field. For example: statusbar_visible="draft,open"
-     *  Currently, the key of (key, label) pairs has to be used in the
-     *  selection of visible items. This feature is not meant to be used
-     *  with many2one fields.
-     */
-    filter_selection: function() {
-        var self = this;
-        var shown = _.map(((this.node.attrs || {}).statusbar_visible || "").split(","),
-            function(x) { return _.str.trim(x); });
-        shown = _.select(shown, function(x) { return x.length > 0; });
-
-        if (shown.length == 0) {
-            this.to_show = this.selection;
-        } else {
-            this.to_show = _.select(this.selection, function(x) {
-                return _.indexOf(shown, x[0]) !== -1 || x[0] === self.selected_value;
-            });
+            console.log(this.selection);
+            this.render_elements();
         }
     },
-
     /** Renders the widget. This function also checks for statusbar_colors='{"pending": "blue"}'
      *  attribute in the widget. This allows to set a given color to a given
      *  state (given by the key of (key, label)).
      */
     render_elements: function () {
         var self = this;
-        var content = instance.web.qweb.render("FieldStatus.content", {widget: this, _:_});
+        var content = instance.web.qweb.render("FieldStatus.content", {widget: this});
         this.$element.html(content);
-        if (this.clickable) {
-            this.$element.addClass("oe_form_steps_clickable");
-            $('.oe_form_steps_arrow').remove();
-
-            var elemts = this.$element.find('li');
-            _.each(elemts, function(element){
-                $item = $(element);
-                if ($item.attr("data-id") != self.selected_value) {
-                    $item.click(function(event){
-                        var data_id = parseInt($(this).attr("data-id"))
-
-                        return this.view.recursive_save().pipe(exec_action);
-                        self.view.dataset.call('stage_set', [[self.view.datarecord.id],data_id]).then(function() {
-                            return self.view.reload();
-                        });
-                    });
-                }
-            });
-        } else {
-            this.$element.addClass("oe_form_steps");
-        }
         var colors = JSON.parse((this.node.attrs || {}).statusbar_colors || "{}");
         var color = colors[this.selected_value];
         if (color) {
-            var elem = this.$element.find("li.oe_form_steps_active span");
-            elem.css("color", color);
+            this.$("oe_active").css("color", color);
         }
     },
-    on_click_stage: function () {
+    on_click_stage: function (ev) {
+        var self = this;
+        var $li = $(ev.currentTarget);
+        var val = parseInt($li.data("id"));
+        if (val != self.selected_value) {
+            this.view.recursive_save().then(function() {
+                var change = {};
+                change[self.name] = val;
+                self.view.dataset.write(self.view.datarecord.id, change).then(function() {
+                    self.view.reload();
+                });
+            });
+        }
     },
 });
 
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index f2e022c74e0..c91c156a2c4 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1083,33 +1083,13 @@
     </span>
 </t>
 <t t-name="FieldStatus">
-    <ul class="" t-att-style="widget.node.attrs.style"/>
+    <ul t-att-class="widget.options.clickable ? 'oe_form_steps_clickable' : 'oe_form_steps'" t-att-style="widget.node.attrs.style"/>
 </t>
-
-
 <t t-name="FieldStatus.content">
-    <t t-set="size" t-value="widget.to_show.length"/>
-    <t t-foreach="_.range(size)" t-as="i">
-        <li t-att-class="widget.to_show[i][0] === widget.selected_value ? 'oe_form_steps_active' : 'oe_form_steps_inactive'">
-            <div class="oe_form_steps_button" t-att-data-id="widget.to_show[i][0]">
-                <t t-esc="widget.to_show[i][1]"/>
-                <span class="oe_form_steps_arrow">
-                    <span></span>
-                </span>
-                <img t-att-src='_s + "/web/static/src/img/form_steps.png"' class="oe_form_steps_arrow" t-if="i &lt; size - 1"/>
-            </div>
-        </li>
-    </t>
-</t>
-
-
-<t t-name="FieldStatus.content">
-    <t t-set="size" t-value="widget.to_show.length"/>
-    <t t-foreach="_.range(size)" t-as="i">
-        <li t-att-class="widget.to_show[i][0] === widget.selected_value ? 'oe_active' : ''" t-att-data-id="widget.to_show[i][0]">
-            <span class="label">
-                <t t-esc="widget.to_show[i][1]"/>
-            </span>
+    <t t-foreach="widget.selection" t-as="i">
+        <li t-att-class="i[0] === widget.selected_value ? 'oe_active' : ''" t-att-data-id="i[0]">
+            <span class="label"><t t-esc="i[1]"/></span>
+            <!-- are you mit ? -->
             <span class="arrow"><span></span></span>
         </li>
     </t>