onPieceDrop not triggered when promoting about react-chessboard

[Clariity]

would an onPromotionDialogOpen prop help out here?

this function could return whether the move is valid and then not show the dialog

[DevArches]

Just logged it for me with that exact fen. Worked fine, returned all the values and the promotion piece I selected. Can you explain a bit more exactly what is happening when you select the promoted piece?

[kaustavsarkar]

I am writing some custom logic on top of the chessboard and for that I need to the onPieceDrop event to be triggered. However, for the case, where a pawn can promote, it is not triggering the onPieceDrop event.

[DevArches]

Are you doing anything with the onPromotionPieceSelect? Removing it and leaving it as default should work if you aren't using click to move. If you are what I did to fix it is to conditionally set the onPromotionPieceSelect to what I needed only if my promotionDialog state is set to open.

[kaustavsarkar]

Yes, I am using onPromotionPieceSelect to check which piece is being selected by the player. I was expecting to get the onPieceDrop event to determine if the promotion is valid or not and depending on that I could have shown the modal. Since, without this check, the chessboard does not check for valid move for promotion.

Upon playing around with the stories in the repo, I figure that onPieceDrop is called once the piece is selected for promotion. Which stops me from determining a valid move.

[kaustavsarkar]

Do you think there is a way around it? Or I can create a PR if you can show me the code.

[DevArches]

You should be checking if the promotion is valid before you get that far. There is a PR that will check at least if the pawn is in the correct position. For drag and drop I check if the promotion is valid with onDragOverSquare and set showPromotionDialog to false if not valid. (I haven't 100% finished this implementation yet but seems to be fine logically). Though yes this is a very hacky workaround in my opinion.
For click to move obviously with onSquareClick. For click to move, if it is a valid promotion I set a state that is promotionDialogOpen and then conditionally set the promotion dialog open and set a custom onPromotionPieceSelect. That way onPromotionPieceSelect is always set to default unless needed.

[kaustavsarkar]

I think the first check we could have is whether the pawn promotion is even valid.

After that, I would expect to have onPieceDrop triggered (considering, the drop would happen first and then I would select a piece, also the notation cxb8=Q, can be considered as the pawn took the piece at b8 and then got promoted to Queen, or whatever). That is just my preference TBH and I am flexible the way it is implemented.

@Clariity onPromotionDialogOpen could be helpful, ig.

@DevArches I will try your option out, I think that is the only way around for now.

Thanks folks for the quick response.. :)

[Clariity]

I've done a bit more thinking about this

We cannot check if the move is valid before the promotion piece is selected because until then, no move has been made as we don't know the piece the pawn is being promoted to so onPieceDrop cannot be called with the correct number of arguments

[kaustavsarkar]

We may not need to know which piece is being selected, we just need to know if the pawn can be moved to the next square.

If you consider the above-provided FEN ("1nb1kbnr/2P2ppp/r7/2p5/3p4/8/PP3PPP/RNBQKBNR w KQk - 0 9"), the pawn is at C7 and there is a BK at C8. So basically it is not a valid move. But there is a bK at b8 which can be captured by the pawn and makes it a valid move....

chess.js can provide this information about valid moves by using something like:

 isValidMove(chess, sourceSquare, targetSquare) {
        const moves = chess.moves({ verbose: true, square: sourceSquare });

        for (const move of moves) {
            if (targetSquare === move.to) {
                return true;
            }
        }
        return false;
    }
    ```

[kaustavsarkar]

Sorry Closed this mistakenly

[Clariity]

added prop in https://github.com/Clariity/react-chessboard/releases/tag/v3.2.0

[kaustavsarkar]

Thanks a lot for the PR!! :)