Stepper doesn't wait until async call completes. Once you call the validateAsync() the step shows invalid but proceeds to the next step. When you return back to the previous invalid step you are then unable to proceed to the next as the step is then aware that is indeed invalid and you must satisfy the rules before proceeding.
My use case is that I have a debounced axios call to my api to check if a name already exists. The stepper is used to setup a new account and then children records that are only able to be created if the provided primary key from step 1 creation is successfully completed.
So Step 1 (Create parent record) => Step 2 (Create new child record with foreign key to parent).
If the parent primary key already exists, it should error and not proceed. Also if it receives a axios response error, it should make the form invalid and prevent navigating to the next step until it receives an Http 200 from the api signifying that the parent was successfully created and primary key can then be a foreign key on the child. Axios seems to be the industry standard and axios calls must be awaited so this functionality is a must for the linear stepper to be properly utilized based on my original intention for adding a linear option in the stepper which followed the pattern of the linear stepper in the Angular material component library.
Vuestic-ui version: 1.9.8
Description
Stepper doesn't wait until async call completes. Once you call the validateAsync() the step shows invalid but proceeds to the next step. When you return back to the previous invalid step you are then unable to proceed to the next as the step is then aware that is indeed invalid and you must satisfy the rules before proceeding.
My use case is that I have a debounced axios call to my api to check if a name already exists. The stepper is used to setup a new account and then children records that are only able to be created if the provided primary key from step 1 creation is successfully completed.
So Step 1 (Create parent record) => Step 2 (Create new child record with foreign key to parent).
If the parent primary key already exists, it should error and not proceed. Also if it receives a axios response error, it should make the form invalid and prevent navigating to the next step until it receives an Http 200 from the api signifying that the parent was successfully created and primary key can then be a foreign key on the child. Axios seems to be the industry standard and axios calls must be awaited so this functionality is a must for the linear stepper to be properly utilized based on my original intention for adding a linear option in the stepper which followed the pattern of the linear stepper in the Angular material component library.
Reproduction
https://ui.vuestic.dev/play#eNrVVU1T2zAQ/SvCPTiZSWJabm5gBijM0OmUDjC91BwUe0MEtqXqw9AJ/u9dSf4KZBhoLy0HFO2u9r192pXXwaEQs8pAEAdzDYXIqYaDpCRk/p2eclkQCcv9JFAahN0mgXM69yXaBEi/J01gzkqgsnUFrbOaFjyDHANSIyWU2kb07tjmVw2O6u0+m981wAjd8iTvbPg05aXGjNPdLsLROyuF0b1lyMGtM9rjOCy6cM7DTXMsTQ6W2o+hlZBRNSb7B2RnpyKPjyS8gJ+GScjCyTDsejOXbIKmBZV3vSPqS4s27uClat+/sdrF9mqP/o9qP7yx2nR7tcdD8x8R2XsjkWw7kU//kuzzqBtmP/q4t8OOm41Y3KpUMqGJAm0EWlghuNRkbYef1GQpeUFCfE3CjwOfUWCzTUgGS5znDssuanhKaZZODQstEuqtNBk8FmTfgox2x5jaO53AjXlNaEzCcEIWfkn9ktmF1OM+45pUNGeZvdgazzbcRmH7wIWDWKp+lemZOpGSo54Y7Qxk5O5kbZWSqIMsiZYGkFbdH3168lVnnB6+nm1SjVxzuBxNI2F15yW03bCAJaJ9AVpB3FK1OXto+2ctsxX13GxN95Q9LXWEItjY2mX2/9cd5NU9t0IP0QY4zwA2paifp1tJwBpen3CnvUEU9Xm6U27k32W7HmP588i3OjZ5MAl8L+NEidmt4iV+LJ2eSePAL1bcKpwEfSdbcxKstBYqjiLD7IfWumYZVFEbxo2OCspKzOwHGVuiRkytsC2W7OYJYsoLwXKQ50IzbJsNZJrn/P6zs9n2avoCz6wgvdtiv1UPnuI3CQpkBUnQ+TSVN6C9++TyKzzg786Jo4cP1ovOC1A8N5ajDzsyZYa0B3GO7ZkTkJU3V+rkAV9Y1RZlifbd51Q9fqH0nu7ebK9Tsf4N9nm3aw==