JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/enyojs/onyx/master/source/package.js"></script>
<script src="https://raw.github.com/enyojs/layout/master/fittable/source/package.js"></script>
<link rel="stylesheet" href="http://enyojs.com/enyo-2.0b5/enyo.css">
JavaScript
enyo.kind({
name:"extras.InputDecorator",
kind:"onyx.InputDecorator",
published:{
alwaysLooksFocused:false,
},
create:function() {
this.inherited(arguments);
this.alwaysLooksFocusedChanged();
},
alwaysLooksFocusedChanged:function() {
this.addRemoveClass("onyx-focused", this.alwaysLooksFocused);
},
receiveBlur:function() {
if(!this.alwaysLooksFocused) {
this.inherited(arguments);
}
}
});
enyo.kind({
name:"ex.App",
kind:"FittableRows",
classes:"enyo-fit",
components:[
{content:"Header"},
{kind: "extras.InputDecorator", alwaysLooksFocused:true, style:"width:100%", fit:true, components: [
{kind:"Scroller", style:"height:100%;width:100%", components:[
{name:"content", kind: "onyx.RichText", richContent:false, onchange: "inputChange", style:"min-height:100%"}
]}
]},
{content:"Footer"}
]
});
new ex.App().renderInto(document.body);