fix: add new poll option only when all of the current options are filled

Author: khushal87

src/messageComposer/middleware/pollComposer/state.ts

@@ -116,24 +116,22 @@ export const pollCompositionStateProcessors: Partial<
     const { index, text } = value;
     const prevOptions = data.options || [];
 
-    const shouldAddEmptyOption =
-      prevOptions.length < MAX_POLL_OPTIONS &&
-      (!prevOptions || (prevOptions.slice(index + 1).length === 0 && !!text));
-
     const shouldRemoveOption =
       prevOptions && prevOptions.slice(index + 1).length > 0 && !text;
 
     const optionListHead = prevOptions.slice(0, index);
-    const optionListTail = shouldAddEmptyOption
-      ? [{ id: generateUUIDv4(), text: '' }]
-      : prevOptions.slice(index + 1);
+    const optionListTail = prevOptions.slice(index + 1);
 
     const newOptions = [
       ...optionListHead,
       ...(shouldRemoveOption ? [] : [{ ...prevOptions[index], text }]),
       ...optionListTail,
     ];
 
+    if (!newOptions.some((option) => !option.text.trim())) {
+      newOptions.push({ id: generateUUIDv4(), text: '' });
+    }
+
     return { options: newOptions };
   },
 };

test/unit/MessageComposer/middleware/pollComposer/state.test.ts

@@ -182,24 +182,36 @@ describe('PollComposerStateMiddleware', () => {
       expect(result.status).toBeUndefined;
     });
 
-    it('should add a new empty option when the last option is filled', async () => {
+    it('should add a new empty option when the all the options are filled', async () => {
       const stateMiddleware = setup();
       const result = await stateMiddleware.handlers.handleFieldChange(
         setupHandlerParams({
           nextState: { ...getInitialState() },
-          previousState: { ...getInitialState() },
+          previousState: {
+            ...getInitialState(),
+            data: {
+              ...getInitialState().data,
+              options: [
+                { id: 'option-1', text: 'Option 1' },
+                { id: 'option-2', text: '' },
+                { id: 'option-3', text: 'Option 3' },
+              ],
+            },
+          },
           targetFields: {
             options: {
-              index: 0,
-              text: 'Option 1',
+              index: 1,
+              text: 'Option 2',
             },
           },
         }),
       );
 
-      expect(result.state.nextState.data.options.length).toBe(2);
+      expect(result.state.nextState.data.options.length).toBe(4);
       expect(result.state.nextState.data.options[0].text).toBe('Option 1');
-      expect(result.state.nextState.data.options[1].text).toBe('');
+      expect(result.state.nextState.data.options[1].text).toBe('Option 2');
+      expect(result.state.nextState.data.options[2].text).toBe('Option 3');
+      expect(result.state.nextState.data.options[3].text).toEqual('');
       expect(result.status).toBeUndefined;
     });