Remove ojComponent from Tab Order

Demonstrate how to remove an ojComponent from the tab order

by Jim Marion

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>
<!-- this content will be overlayed by the toast notification -->
<div class="oj-panel oj-margin">
  <p>
    <label for="text-input">ojInputText 1</label>
    <input id="text-input" 
           type="text"
           data-bind="ojComponent: {component: 'ojInputText'}"/>
  </p>
  <p>
    <label for="basicSelect">Select a browser</label>
    <select id="basicSelect" data-bind="inaccessibleOjSelect: browser,
                          ojSelectOptions: {optionChange: browserChangedHandler,
                               rootAttributes: {style:'max-width:20em'}}">
      <option value="IE">Internet Explorer</option>
      <option value="FF">Firefox</option>
      <option value="CH">Chrome</option>
      <option value="OP">Opera</option>
      <option value="SA">Safari</option>
    </select>
  </p>
  <p>
    <label for="text-input2">ojInputText 2</label>
    <input id="text-input2" 
           type="text"
           data-bind="ojComponent: {component: 'ojInputText'}"/>
  </p>
</div>

CSS

@import url('//rawgit.com/oracle/oraclejet/2.0.1/dist/css/alta/oj-alta-min.css');

#toast .flex-container {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

#toast {
  border: 1px solid #0572ce;
  box-shadow: 0 1px 3px #777;
  margin: 4px auto 0;
  width: 90%;
  /* following z-index required to overlay oj form controls */
  z-index: 1;
}

JavaScript

require(['knockout',
  'ojs/ojcore',
  'jquery',
  'ojs/ojknockout',
  'ojs/ojinputtext',
  'ojs/ojselectcombobox'
], function(ko, oj, $) {
  'use strict';
  
  ko.bindingHandlers.inaccessibleOjSelect = {
    init: function(element, valueAccessor, allBindingsAccessor, ctx) {
      var options = allBindingsAccessor().ojSelectOptions || {};
      var multiple = !!options.multiple;
      var tabEl = $(element)
        // initialize ojSelect
        .ojSelect(options)
        // bind value change handler
        .on({
            'ojoptionchange': function (event, data) {
            	if (data.option === "value") {
                var observable = valueAccessor();
                if (ko.isObservable(observable)) {
                  if (multiple) {
                    observable(data.value);
                  } else {
                    // unwrap from array if single select
                    observable(data.value[0]);
                  }
                } // if not observable, just throw away the value
              }
            }
          })
        // get reference to item with tabIndex
        .ojSelect( "getNodeBySubId", {'subId': 'oj-select-chosen'})
        .closest(".oj-select-choice");

      $(tabEl).attr("tabIndex", -1);

    },
    update: function(element, valueAccessor) {
      var value = ko.utils.unwrapObservable(valueAccessor());
      $(element).ojSelect("option", "value", [value]);
    }
  };


  var ViewModel = function() {
    var self = this;

    self.browser = ko.observable(['CH']);
    
    self.browserChangedHandler = function (event, data) {
      if (data.option == "value") {
        console.log(data);
      }
    };
  };

  ko.applyBindings(new ViewModel());
});


//RequireJS configs (usually these come first in main.js, but they don't have to)
requirejs.config({
  // Path mappings for the logical module names
  paths: {
    'knockout': '//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min',
    'jquery':...