literal change event

src/client/types/literal.type-renderer.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import useTypeRenderers from '~/client/hooks/useTypeRenderers';
 
 import propTypes from './prop-types';
-import {stepsOptions, typeFromLiteral} from './typing';
+import {defaultSteps, stepsOptions, typeFromLiteral} from './typing';
 
 const decorate = compose(
   contempo(require('./literal.raw.scss')),
@@ -23,7 +23,17 @@ const Literal = ({
   options.push('<literal>');
   return (
     <div className="literal">
-      <select readOnly value="<literal>">
+      <select
+        onChange={(event) => {
+          if ('<literal>' !== event.target.value) {
+            onChange({
+              type: 'traversal',
+              steps: defaultSteps(context, type, [{type: 'key', key: event.target.value}]),
+            });
+          }
+        }}
+        value="<literal>"
+      >
         {
           options
             .sort((l, r) => (l.toLowerCase() < r.toLowerCase() ? -1 : 1))