fix: new directory input validation (codesandbox#3233)

Author: jyash97

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitleInput/index.tsx

@@ -63,6 +63,7 @@ export const EntryTitleInput: FunctionComponent<Props> = ({
         onBlur={() => onCommit(currentValue, true)}
         onKeyUp={handleKeyUp}
         ref={select}
+        autoComplete="new-directory"
         value={currentValue}
         id={`input-${id}`}
         aria-invalid={Boolean(error)}

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/validateTitle.js

@@ -1,8 +1,11 @@
 export default (id, title, siblings = []) => {
   if (title.length === 0) return 'Title cannot be empty';
-  if (/^[09azAZ_.]+$/.test(title)) {
+  if (title.includes(' ')) {
     // It has whitespaces
-    return 'Title cannot have whitespaces or special characters';
+    return 'Title cannot have whitespaces';
+  }
+  if (/[!@#$%^&*(),.?":{}|<>]/g.test(title)) {
+    return 'Title cannot have special characters';
   }
 
   if (title.length > 32) {