Page and fieldset fixes (#161)

* Don't scroll on page-set click; filter out empty values from hidden patterns input on page edit form

* Store hidden field for fieldset elements on edit form. TODO: remove the need for this

packages/design/src/FormManager/FormEdit/PreviewPattern.tsx

@@ -18,6 +18,7 @@ export const PreviewPattern: PatternComponent = function PreviewPattern(props) {
     if (
       focus &&
       focus.pattern.id === props._patternId &&
+      focus.pattern.type !== 'page' &&
       focusRef.current?.scrollIntoView
     ) {
       focusRef.current?.scrollIntoView({

packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx

@@ -75,6 +75,11 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
   return (
     <div className="grid-row">
       <div className="grid-col-12 margin-bottom-3 flex-align-self-end">
+        <input
+          type="hidden"
+          {...register('patterns')}
+          defaultValue={pattern.data.patterns}
+        ></input>
         <label
           className={classNames('usa-label width-full maxw-full', {
             'usa-label--error': legend.error,

packages/design/src/FormManager/FormEdit/components/PageEdit.tsx

@@ -54,7 +54,6 @@ const PageEditComopnent = ({ pattern }: { pattern: PagePattern }) => {
   const { fieldId, getFieldState, register } =
     usePatternEditFormContext<PagePattern>(pattern.id);
   const title = getFieldState('title');
-
   return (
     <div className="grid-row grid-gap">
       <input
@@ -78,10 +77,10 @@ const PageEditComopnent = ({ pattern }: { pattern: PagePattern }) => {
         ) : null}
         <input
           className="usa-input"
+          type="text"
           id={fieldId('title')}
           defaultValue={pattern.data.title}
           {...register('title')}
-          type="text"
         ></input>
       </div>
       <div className="grid-col-12">

packages/design/src/FormManager/FormEdit/store.ts

@@ -113,6 +113,10 @@ export const createFormEditSlice =
         return false;
       }
       const elementToSet = getPattern(state.session.form, patternId);
+      if (elementToSet.type === 'page-set') {
+        console.warn('Cannot focus on a page or page-set.', elementToSet.type);
+        return false;
+      }
       if (elementToSet) {
         set({ focus: { errors: undefined, pattern: elementToSet } });
       } else {

packages/forms/src/patterns/fieldset/config.ts

@@ -5,7 +5,22 @@ import { ParsePatternConfigData } from '../../pattern';
 
 const configSchema = z.object({
   legend: z.string().min(1),
-  patterns: z.array(z.string()).default([]),
+  patterns: z.union([
+    // Support either an array of strings...
+    z.array(z.string()),
+    // ...or a comma-separated string.
+    // REVISIT: This is messy, and exists only so we can store the data easily
+    // as a hidden input in the form. We should probably just store it as JSON.
+    z
+      .string()
+      .transform(value =>
+        value
+          .split(',')
+          .map(String)
+          .filter(value => value)
+      )
+      .pipe(z.string().array()),
+  ]),
 });
 export type FieldsetConfigSchema = z.infer<typeof configSchema>;
 

packages/forms/src/patterns/page/config.ts

@@ -13,7 +13,12 @@ const configSchema = z.object({
     // as a hidden input in the form. We should probably just store it as JSON.
     z
       .string()
-      .transform(value => value.split(',').map(String))
+      .transform(value =>
+        value
+          .split(',')
+          .map(String)
+          .filter(value => value)
+      )
       .pipe(z.string().array()),
   ]),
 });

packages/forms/src/patterns/page/prompt.ts

@@ -13,13 +13,10 @@ export const createPrompt: CreatePrompt<PagePattern> = (
   pattern,
   options
 ) => {
-  // :TODO: There's an edge case with page saving where it's being saved with an empty string value. Figure out root cause.
-  const children = pattern.data.patterns
-    .filter((patternId: string) => patternId.length > 0)
-    .map((patternId: string) => {
-      const childPattern = getPattern(session.form, patternId);
-      return createPromptForPattern(config, session, childPattern, options);
-    });
+  const children = pattern.data.patterns.map((patternId: string) => {
+    const childPattern = getPattern(session.form, patternId);
+    return createPromptForPattern(config, session, childPattern, options);
+  });
   return {
     props: {
       _patternId: pattern.id,