update handle remove function

Khan · Dec 20, 2024 · 1577d98 · 1577d98
1 parent e6e8708
commit 1577d98
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/packages/perseus-editor/src/widgets/expression-editor.tsx b/packages/perseus-editor/src/widgets/expression-editor.tsx
@@ -189,7 +189,7 @@ class ExpressionEditor extends React.Component<Props, State> {
     };
 
     _newEmptyAnswerForm: () => any = () => {
-        const newKey = _makeNewKey(this.props.answerForms)
+        const newKey = _makeNewKey(this.props.answerForms);
         return {
             considered: "correct",
             form: false,
@@ -212,8 +212,11 @@ class ExpressionEditor extends React.Component<Props, State> {
     handleRemoveForm: (answerKey: number) => void = (i) => {
         const answerForms = this.props.answerForms.slice();
         answerForms.splice(i, 1);
-
-        this.change({answerForms});
+        const updatedAnswerForms = answerForms.map((form, index) => ({
+            ...form,
+            key: `${index}`,
+        }));
+        this.change({answerForms: updatedAnswerForms});
     };
 
     // This function is designed to update the answerForm property
@@ -346,7 +349,7 @@ class ExpressionEditor extends React.Component<Props, State> {
 
     render(): React.ReactNode {
         const answerOptions: React.JSX.Element[] = this.props.answerForms.map(
-            (ans: AnswerForm) => {
+            (ans: AnswerForm, index: number) => {
                 const key = parseAnswerKey(ans);
 
                 const expressionProps: Partial<
@@ -378,7 +381,7 @@ class ExpressionEditor extends React.Component<Props, State> {
                         expressionProps={expressionProps}
                         form={ans.form}
                         simplify={ans.simplify}
-                        onDelete={() => this.handleRemoveForm(key)}
+                        onDelete={() => this.handleRemoveForm(index)}
                         onChangeSimplify={(simplify) =>
                             this.changeSimplify(key, simplify)
                         }
@@ -567,6 +570,7 @@ class AnswerOption extends React.Component<
 
     handleImSure = () => {
         this.props.onDelete();
+        this.handleCancelDelete();
     };
 
     handleCancelDelete = () => {