Fix role select not working when adding a team member

This issue is caused by bad Radix code. Root cause can be found here radix-ui/primitives#3759
The fix is quite temporary and ideally should be fixed by refactoring
select to be a homebaked component

Author: Oksamies

apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/MemberAddForm.tsx

@@ -115,65 +115,64 @@ export function MemberAddForm(props: {
         </NewButton>
       }
     >
-      <form onSubmit={strongForm.handleSubmit}>
-        <Modal.Body>
-          <div className="add-member-form__text">
-            Enter the username of the user you wish to add to the team{" "}
-            <span className="add-member-form__text--bold">
-              {props.teamName}
-            </span>
-            .
+      <Modal.Body>
+        <div className="add-member-form__text">
+          Enter the username of the user you wish to add to the team{" "}
+          <span className="add-member-form__text--bold">{props.teamName}</span>.
+        </div>
+        <div className="add-member-form__fields">
+          <div className="add-member-form__field add-member-form__username">
+            <label className="add-member-form__label" htmlFor="username">
+              Username <RequiredIndicator />
+            </label>
+            <NewTextInput
+              name={"username"}
+              placeholder={"Enter username..."}
+              value={formInputs.username}
+              onChange={(e) => {
+                setError(null);
+                updateFormFieldState({
+                  field: "username",
+                  value: e.target.value,
+                });
+              }}
+              enterHook={() => {
+                strongForm.handleSubmit();
+              }}
+              rootClasses="add-member-form__username-input"
+              id="username"
+              {...usernameFieldProps}
+            />
+            {error && <div className="add-member-form__error">{error}</div>}
           </div>
-          <div className="add-member-form__fields">
-            <div className="add-member-form__field add-member-form__username">
-              <label className="add-member-form__label" htmlFor="username">
-                Username <RequiredIndicator />
-              </label>
-              <NewTextInput
-                name={"username"}
-                placeholder={"Enter username..."}
-                value={formInputs.username}
-                onChange={(e) => {
-                  setError(null);
-                  updateFormFieldState({
-                    field: "username",
-                    value: e.target.value,
-                  });
-                }}
-                rootClasses="add-member-form__username-input"
-                id="username"
-                {...usernameFieldProps}
-              />
-              {error && <div className="add-member-form__error">{error}</div>}
-            </div>
-            <div className="add-member-form__field">
-              <label className="add-member-form__label" htmlFor="role">
-                Role
-              </label>
-              <NewSelect
-                name={"role"}
-                placeholder="Select role..."
-                options={roleOptions}
-                defaultValue="member"
-                value={formInputs.role}
-                onChange={(value) => {
-                  updateFormFieldState({ field: "role", value: value });
-                }}
-                id="role"
-              />
-            </div>
+          <div className="add-member-form__field">
+            <label className="add-member-form__label" htmlFor="role">
+              Role
+            </label>
+            <NewSelect
+              name={"role"}
+              placeholder="Select role..."
+              options={roleOptions}
+              defaultValue="member"
+              value={formInputs.role}
+              onChange={(value) => {
+                updateFormFieldState({ field: "role", value: value });
+              }}
+              id="role"
+            />
           </div>
-        </Modal.Body>
-        <Modal.Footer>
-          <NewButton
-            type="submit"
-            csVariant="accent"
-            disabled={!strongForm.isReady}
-          >
-            Add member
-          </NewButton>
-        </Modal.Footer>
-      </form>
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <NewButton
+          type="submit"
+          csVariant="accent"
+          onSubmit={strongForm.handleSubmit}
+          disabled={!strongForm.isReady}
+        >
+          Add member
+        </NewButton>
+      </Modal.Footer>
     </Modal>
   );
 }

packages/cyberstorm/src/newComponents/Select/Select.tsx

@@ -74,6 +74,7 @@ function SelectComponent<T extends string>(props: SelectProps<T>) {
     >
       <Trigger asChild>
         <NewButton
+          type="button"
           csVariant="secondary"
           csSize={csSize}
           aria-label={forwardedProps["aria-label"]}