Support editing properties of type array without oneOf, selector and selectorAll

examples/index.html

@@ -9,7 +9,9 @@
     <script>
     AFRAME.registerComponent('models-array', {
       schema: {
-        models: {type: 'array', oneOf: ['one', 'two', 'three', 'four']}
+        models: {type: 'array', oneOf: ['one', 'two', 'three', 'four']},
+        entity: {type: 'selector'},
+        entities: {type: 'selectorAll'}
       }
     })
 

src/components/components/PropertyRow.js

@@ -69,27 +69,29 @@ export default class PropertyRow extends React.Component {
   getWidget() {
     const props = this.props;
     const type = this.getType();
+    const isSelectorType = type === 'selector' || type === 'selectorAll';
 
-    let value =
-      type === 'selector'
-        ? props.entity.getDOMAttribute(props.componentname)?.[props.name]
-        : props.data;
+    const value = isSelectorType
+      ? props.entity.getDOMAttribute(props.componentname)?.[props.name]
+      : props.data;
 
-    if (type === 'string' && value && typeof value !== 'string') {
-      // Allow editing a custom type like event-set component schema
-      value = props.schema.stringify(value);
-    }
+    const updateProperty = (name, value) => {
+      updateEntity(
+        props.entity,
+        props.componentname,
+        !props.isSingle ? props.name : '',
+        value
+      );
+    };
 
+    // For selector and selectorAll types, commit on blur only (not on each
+    // keystroke): a partial selector is rarely valid and querying the DOM on
+    // every character is wasteful.
     const widgetProps = {
       name: props.name,
-      onChange: function (name, value) {
-        updateEntity(
-          props.entity,
-          props.componentname,
-          !props.isSingle ? props.name : '',
-          value
-        );
-      },
+      ...(isSelectorType
+        ? { onBlur: updateProperty }
+        : { onChange: updateProperty }),
       value: value,
       id: this.id
     };
@@ -136,7 +138,17 @@ export default class PropertyRow extends React.Component {
         return <BooleanWidget {...widgetProps} />;
       }
       default: {
-        return <InputWidget {...widgetProps} />;
+        // For selector and selectorAll types, omit the schema so InputWidget
+        // doesn't parse the string into a DOM element / NodeList. We want the
+        // raw selector string to reach setAttribute — A-Frame preserves it
+        // verbatim in attrValue, even when it doesn't resolve, so the UI
+        // shows what the user typed.
+        return (
+          <InputWidget
+            {...widgetProps}
+            schema={isSelectorType ? undefined : props.schema}
+          />
+        );
       }
     }
   }

src/components/widgets/InputWidget.js

@@ -7,27 +7,50 @@ export default class InputWidget extends React.Component {
     name: PropTypes.string.isRequired,
     onBlur: PropTypes.func,
     onChange: PropTypes.func,
+    schema: PropTypes.object,
     value: PropTypes.any
   };
 
   constructor(props) {
     super(props);
-    this.state = { value: this.props.value || '' };
+    this.state = { value: this.stringifyValue(props.value) };
     this.input = React.createRef();
   }
 
+  stringifyValue = (value) => {
+    // For selector and selectorAll types, getDOMAttribute returns null for
+    // single-property schema and undefined for multi-property schema when the
+    // property is not set.
+    if (value === undefined || value === null) return '';
+    if (typeof value === 'string') return value;
+    // Non-string value (array, custom object like event-set): stringify for display
+    if (this.props.schema) return this.props.schema.stringify(value);
+    return String(value);
+  };
+
+  parseInput = (value) => {
+    // The type array doesn't bailout-on-string in its stringify
+    // (arrayStringify), so we need to parse the input value before calling
+    // onChange. That could potentially happen for a custom property that
+    // implements its own parse/stringify functions.
+    if (this.props.schema) {
+      return this.props.schema.parse(value);
+    }
+    return value;
+  };
+
   onChange = (event) => {
     const value = event.target.value;
     this.setState({ value: value });
     if (this.props.onChange) {
-      this.props.onChange(this.props.name, value);
+      this.props.onChange(this.props.name, this.parseInput(value));
     }
   };
 
   onBlur = (event) => {
     if (this.props.onBlur) {
       const value = event.target.value;
-      this.props.onBlur(this.props.name, value);
+      this.props.onBlur(this.props.name, this.parseInput(value));
     }
   };
 
@@ -43,7 +66,7 @@ export default class InputWidget extends React.Component {
 
   componentDidUpdate(prevProps) {
     if (this.props.value !== prevProps.value) {
-      this.setState({ value: this.props.value || '' });
+      this.setState({ value: this.stringifyValue(this.props.value) });
     }
   }