fix: UIKit stopPropagation (#137)

packages/fuselage-ui-kit/src/Input.js

@@ -42,6 +42,7 @@ export const PlainInput = ({ element, context, index, parser }) => {
       error={error}
       value={value}
       onInput={action}
+      onChange={() => {}}
       placeholder={parser.plainText(placeholder)}
     />
   );

packages/fuselage-ui-kit/src/hooks.js

@@ -13,9 +13,12 @@ export const defaultContext = {
 export const kitContext = React.createContext(defaultContext);
 
 export const useBlockContext = ({ blockId, actionId, appId, initialValue }, context) => {
-  const [value, setValue] = useState(initialValue);
+  const { action, appId: appIdFromContext, viewId, state, errors, values = {} } = useContext(kitContext);
+  const { value = initialValue } = values[actionId] || {};
+
+  // const [value, setValue] = useState(initialValue);
   const [loading, setLoading] = useState(false);
-  const { action, appId: appIdFromContext, viewId, state, errors } = useContext(kitContext);
+
   const error = errors && actionId && errors[actionId];
 
   if ([BLOCK_CONTEXT.SECTION, BLOCK_CONTEXT.ACTION].includes(context)) {
@@ -27,7 +30,7 @@ export const useBlockContext = ({ blockId, actionId, appId, initialValue }, cont
   }
 
   return [{ loading, setLoading, value, error }, async ({ target: { value } }) => {
-    setValue(value);
+    // setValue(value);
     setLoading(true);
     await state({ blockId, appId, actionId, value });
     setLoading(false);

packages/fuselage-ui-kit/src/index.js

@@ -84,9 +84,7 @@ class MessageParser extends UiKitParserMessage {
   }
 
   actions(args, _, key) {
-    return (
-      <ActionsLayoutBlock {...args} key={key} parser={this} />
-    );
+    return <ActionsLayoutBlock {...args} key={key} parser={this} />;
   }
 
   datePicker(element, context, key) {

packages/fuselage/src/components/Options/index.js

@@ -95,7 +95,7 @@ export const useCursor = (initial, options, onChange) => {
   const handleKeyDown = (e) => {
     const lastIndex = options.length - 1;
     const { keyCode, key } = e;
-    if (AnimatedVisibility.HIDDEN === visibility && keyCode !== ACTIONS.ESC) {
+    if (AnimatedVisibility.HIDDEN === visibility && keyCode !== ACTIONS.ESC && keyCode !== ACTIONS.TAB) {
       return show();
     }
     switch (keyCode) {
@@ -120,11 +120,23 @@ export const useCursor = (initial, options, onChange) => {
 
     case ACTIONS.ENTER:
       e.preventDefault();
+      if (visibility === AnimatedVisibility.VISIBLE) {
+        e.persist();
+        e.nativeEvent.stopImmediatePropagation(); // TODO
+        e.stopPropagation();
+      }
       return onChange(options[cursor], visibilityHandler);
     case ACTIONS.ESC:
       e.preventDefault();
       reset();
-      return hide();
+      hide();
+      if (visibility === AnimatedVisibility.VISIBLE) {
+        e.persist();
+        e.nativeEvent.stopImmediatePropagation(); // TODO
+        e.stopPropagation();
+        return false;
+      }
+      break;
     default:
       const index = options.findIndex(([, label]) => label[0] === key);
       setCursor(index);

packages/fuselage/src/components/Options/styles.scss

@@ -15,4 +15,8 @@
   &--focus {
     background: $colors-n400;
   }
+
+  &--selected {
+    color: $text-colors-primary;
+  }
 }

packages/fuselage/src/components/Select/Select.js

@@ -59,7 +59,9 @@ export const Select = ({
 
   useEffect(reset, [filter]);
 
-  const visibleText = (filter === undefined || visible === AnimatedVisibility.HIDDEN) && (getLabel(option) || placeholder);
+  const valueLabel = getLabel(option);
+
+  const visibleText = (filter === undefined || visible === AnimatedVisibility.HIDDEN) && (valueLabel ? <Box textStyle='p1' textColor='default'>{valueLabel}</Box> : placeholder);
   return (
     <Container ref={containerRef} onClick={() => ref.current.focus() & show()}>
       <Flex.Item>
@@ -85,6 +87,6 @@ export const SelectFiltered = ({
   ...props
 }) => {
   const [filter, setFilter] = useState('');
-  const anchor = useCallback(React.forwardRef(({ children, filter, ...props }, ref) => <Margins inline='x4'><Flex.Item grow={1}><InputBox.Input ref={ref} placeholder={placeholder} value={filter} onInput={(e) => setFilter(e.currentTarget.value)} {...props} mod-undecorated={true}/></Flex.Item></Margins>), []);
+  const anchor = useCallback(React.forwardRef(({ children, filter, ...props }, ref) => <Margins inline='x4'><Flex.Item grow={1}><InputBox.Input ref={ref} placeholder={placeholder} value={filter} onChange={() => {}} onInput={(e) => setFilter(e.currentTarget.value)} {...props} mod-undecorated={true}/></Flex.Item></Margins>), []);
   return <Select filter={filter} options={options} {...props} anchor={anchor}/>;
 };