structure of xstate config which has condion included & which can be used in vue-kanban pkg

Question

I'm trying to create xstate Machine which has condition to be check when moving to another state(Using VueJs).

issue is the way tried which is not working with vue-kanban(https://github.com/BrockReece/vue-kanban) pkg

below is my sample state machine config :

stateMachineConfig: {
        id: "kanban",
        initial: "on-hold",
        states: {
          "on-hold": {
            on: {
              IN_PROGRESS:"in-progress",
            }
          },
          "in-progress": {
            on: {
              RELINQUISH_TASK: "on-hold",
              PUSH_TO_QA: "needs-review",
            },
          },
          "needs-review": {
            on: {
              REQUEST_CHANGE: "in-progress",
              PASS_QA: "approved",
            },
          },
          approved: {
            type: "final",
          },
        },
      },

this is the UI of kanban(https://ibb.co/6rWxN0F)

after i changing above config by adding condition to "on-hold" state then i can't move to anywhere from "on-hold" state.

below is the new config:

const searchValid = (context) => {
  console.log(`context.status `, context);
  return true;
};

stateMachineConfig: {
        id: "kanban",
        initial: "on-hold",
        states: {
          "on-hold": {
            on: {
              PICK_UP: [
              {
                target: "in-progress",
                cond: searchValid
              }
            ]
            }
          },
          "in-progress": {
            on: {
              RELINQUISH_TASK: "on-hold",
              PUSH_TO_QA: "needs-review",
            },
          },
          "needs-review": {
            on: {
              REQUEST_CHANGE: "in-progress",
              PASS_QA: "approved",
            },
          },
          approved: {
            type: "final",
          },
        },
      },

any help to fix it!

Answer 1

I have tested your machine using the XState visualizer and all works properly, you can check it here